如何使用 Jquery 将 <tr> 添加到动态表？答案

【问题标题】：How to add a <tr> to dynamic table with Jquery?如何使用 Jquery 将 <tr> 添加到动态表？
【发布时间】：2013-09-05 12:43:04
【问题描述】：

如何将此字段数组包装到<tr> 元素中，这样结果将是一个表行中的 4 个表数据字段？

Json 数据：

{
"result": {
    "rowset": {
        "row": [
            {
                "field": [
                    {
                        "content": test1,
                        "name": "name1"
                    },
                    {
                        "content": "test2",
                        "name": "name2"
                    },
                    {
                        "content": "test3",
                        "name": "name3"
                    },
                    {
                        "content": test4,
                        "name": "name4"
                    }
                ]
            },
            .. etc.

jquery：

 $.getJSON('data/jsondata.json', function(data) { 
    var rowLength = data.result.rowset.row.length;

    for (var i = 0; i < rowLength; i++) { 
    //$('tbody').append('<tr>');   
    //var myTr = $('tbody').append('<tr>');

        for (j = 0; j < 4; j++) {               
            $('tbody').append('<td>'+data.result.rowset.row[i].field[j].content+'</td>');       

        }   
    }  
});

【问题讨论】：

标签： jquery json for-loop html-table append

【解决方案1】：

你想要的东西需要一点点适应。试试这个：

$.getJSON('data/jsondata.json', function(data) {
    var rowLength = data.result.rowset.row.length;

    for (var i = 0; i < rowLength; i++) {
        var row = data.result.rowset.row[i];
        var myTR = $('<tr>');

        for (j = 0; j < row.field.length; j++) {
            var myTD = $('<td>');
            myTD.text(row.field[j].content);
            myTR.append(myTD);
        }
        $('tbody').append(myTR);
    }
});

【讨论】：

【解决方案2】：

当它实际上是一个 json 对象时，你可以利用它并使用它的字段名称，更简洁：

$.getJSON('data/jsondata.json', function(data) {
    var $table = $("table");

    $(data.result.rowset.row).each(function(){
        var $tr = $("<tr/>");

        $(this.field).each(function() {
            $tr.append("<td>" + this.content + "</td>");                    
        });

        $table.append($tr);
    }); 
});

【讨论】：