如何使用Jquery添加到动态表?

时间:2013-09-02 11:54:01

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

如何将此字段数组包装到<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>');       

        }   
    }  
});

2 个答案:

答案 0 :(得分:0)

您想要的东西需要很少的适应性。试试这个:

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

答案 1 :(得分:0)

当它实际上是一个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);
    }); 
});