jQuery 添加表格行 - Javascript

在Web开发中，常常需要动态向表格中添加行。使用jQuery可以非常方便地实现这个功能。

添加表格行

要向表格中添加新的一行，可以使用以下代码：

$('#tableId tbody').append('<tr><td>Cell 1</td><td>Cell 2</td></tr>');

上面的代码会在表格的tbody中添加一行，并设置该行的内容为“Cell 1”和“Cell 2”。

从数组添加表格行

如果要从一个数组中添加多行，可以使用以下代码：

var data = [
    { name: 'Tom', age: 25 },
    { name: 'Jerry', age: 21 },
    { name: 'Jane', age: 28 }
];

var html = '';
for (var i = 0; i < data.length; i++) {
    html += '<tr><td>' + data[i].name + '</td><td>' + data[i].age + '</td></tr>';
}

$('#tableId tbody').append(html);

上面的代码会从数组data中逐个生成行，并将它们添加到表格的tbody中。

插入表格行

要将新行插入到表格的指定位置，可以使用以下代码：

$('#tableId tbody tr:eq(2)').before('<tr><td>Cell 1</td><td>Cell 2</td></tr>');

上面的代码会在表格的第3行前插入一行，并设置该行的内容为“Cell 1”和“Cell 2”。

总结

使用jQuery添加表格行非常简单，可以轻松地实现表格的动态更新。通过以上介绍，相信大家已经掌握了添加表格行的基本方法。