jquery - 如何使用 Jquery 添加到动态表？

Question

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

json数据：

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

查询：

 $.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>');       

        }   
    }  
});

Answer 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);
    }
});

Answer 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);
    }); 
});