jquery - 如何使用 jquery 创建一个包含行的新表并将其包装在 div 中

Question

我想在 div 元素中创建表格

在我的 .html 文件中，我有这个

<div id='div1'> </div>

在我的 js 文件中，我想放置包含行和数据的新表

我该如何实现？

Answer 1

假设您有表格的 HTML，您可以简单地从中创建一个 jQuery 对象并将其附加到 DIV。如果您有数据，则需要遍历它并根据数据创建单元格/行并独立添加它们。

$('<table><tr><td>.....</td></tr></table>').appendTo( '#div1' );

或

var data = [ [ 1, 2, 3 ], [ 4, 5, 6 ], [7, 8, 9 ] ];

var html = '<table><thead><tr>...</tr></thead><tbody>';
for (var i = 0, len = data.length; i < len; ++i) {
    html += '<tr>';
    for (var j = 0, rowLen = data[i].length; j < rowLen; ++j ) {
        html += '<td>' + data[i][j] + '</td>';
    }
    html += "</tr>";
}
html += '</tbody><tfoot><tr>....</tr></tfoot></table>';

$(html).appendTo('#div1');