Question

JQuery操作Json循环插入到Table，求助！

1创建Json对象：
var data = " [ {name:'6101',value:'北京市',age:'11'}, {name:'6102',value:'天津市',age:'11'}, {name:'6103',value:'上海市',age:'22'}]"; //创建Json字符串
var dataObj = eval("(" + data + ")"); //转换为json对象

2，table：
<table id="mytab" border="1">
<tr>
<th>代号</th>
<th>城市</th>
<th>附加数字</th>
</tr>
</table>

------------------------------我的想法-------------------------------
外面for循环用来遍历JSON有多少个“子对象”，并给table添加tr,
内部each遍历每个‘子对象的属性’，写入tr里面！
-----------------------------我的想法结束----------------------------

3,循环插入的JQ代码：
　 var $tab1 = $("#mytab");
for (i = 0; i < dataObj.length; i++) {
$tab1.append("<tr>");
　 $.each(dataObj[i], function (j, val) {
　 $("#mytab").append("<td>"+val+"</td>");
　 });
$tab1.append("</tr>");
　 }

如何后的结果为：

Answer 1

<table id="myTable">
    <thead>
        <tr>
            <th>代号</th>
            <th>城市</th>
            <th>附加数字</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<script>
var data = [{name:'6101',value:'北京市',age:'11'}, {name:'6102',value:'天津市',age:'11'}, {name:'6103',value:'上海市',age:'22'}];
function getRow(row) {
    var tr = $('<tr></tr>');
    for(var i in row) {
        tr.append('<td>' + row[i] + '</td>');
    }
    return tr;
}
var tbody = $('<tbody></tbody>');
for(var i = 0; i < data.lenght; i ++ )
    tbody.append(getRow(data[i]);
$('#myTable tbody').replaceWith(tbody);
</script>

这个是比较标准，也更易读的代码，希望能帮到你。

Answer 2

$.each(dataObj,function(index,item){
    var $tr = $('<tr>');
    $.each(item,function(name,val){
        var $td = $('<td>').html(val);
        $tr.append($td);
    });
    $tab1.append($tr);
});

Answer 3

$('#mytab').append($(data).map(function(){return '<tr>{0}</tr>'.format($(this).map(function(){return '<td>{0}</td>'.format(this);}));}));

Answer 4

不用外面的循环，直接把$tab1.append("<tr>");放到each里面就可以了