Question

我在表格中显示数据如下

{'headers': [u'first',
             u'last',
             u'age'],
 'values': [[u'sam',u'tom', 31]]}

使用jquery作为

jQuery.each(data, function(index, value) {
    var tr = $('<tr/>');
    for (var i = 0; i<value.length; i++){
        if (index=="headers"){
            tr.append("<th>" + value[i] + "</th>");
        }
        else{
            for (var j = 0; j<value[i].length; j++){
                tr.append("<td>" + value[i][j] + "</td>");
            }
        }
    }

    $("#table1").append(tr);
});

它可以正确显示标题行和第一行。但是当我有2个值列表的数据为

时

 'values': [[u'sam', u'tom', 31],
            [u'dean', u'tom', 28]]

而是创建第二行，它在一行中显示整个6个值。如何在下一行显示第二个列表？

Answer 1

在使用<tr/>

向其添加任何内容之前，您正在关闭行

试试这个：

jQuery.each(data, function(index, value) {
    var tr = $('<tr>');
    for (var i = 0; i<value.length; i++){
        if (index=="headers"){
            tr.append("<th>" + value[i] + "</th>");
        }
        else{
            for (var j = 0; j<value[i].length; j++){
                tr.append("<td>" + value[i][j] + "</td>");
            }
            tr.append("</tr><tr>");
        }
    }
    tr.append("</tr>");
    $("#table1").append(tr);
});

Answer 2

您想为var data = { 'headers': ['first','last','age'], 'values': [ ['sam','tom', 31], ['johnny','walker', 69] ] } $.each(data, function(index, value) { if (index == "headers") { let tr = $('<tr />'); $.each(value, function(k, v){ tr.append("<th>" + v + "</th>"); }) $("#table1").append(tr); } else { $.each(value, function(i,row) { let tr = $('<tr />'); $.each(row, function(k, v){ tr.append("<td>" + v + "</td>"); }) $("#table1").append(tr); }); } });中的每个数组添加一个新行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table1"></table>

–a

jquery将数据插入下一行

2 个答案: