jquery动态添加表格行

jQuery动态添加表格行的方法

动态添加表格行是前端开发中常见的需求，以下是几种实现方式：

基础方法：使用append()

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

从数据对象动态生成

var data = [{name: '张三', age: 25}, {name: '李四', age: 30}];
$.each(data, function(index, item) {
    $('#tableId').append(
        `<tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
        </tr>`
    );
});

使用模板字符串提高可读性

let rowHtml = `
    <tr class="new-row">
        <td><input type="text" class="name"></td>
        <td><input type="number" class="age"></td>
        <td><button class="delete-btn">删除</button></td>
    </tr>
`;
$('#tableId tbody').append(rowHtml);

在特定位置插入行

// 在第二行后插入
$('#tableId tr:eq(1)').after('<tr><td>新行</td></tr>');

// 在最后一行前插入
$('#tableId tr:last').before('<tr><td>新行</td></tr>');

带事件绑定的动态添加

var newRow = $('<tr><td>点击我</td></tr>').click(function() {
    alert('行被点击');
});
$('#tableId').append(newRow);

性能优化建议 对于需要添加大量行的情况，建议先构建完整HTML字符串再一次性添加，而不是多次DOM操作：

var html = '';
for(var i=0; i<100; i++) {
    html += `<tr><td>行${i}</td></tr>`;
}
$('#tableId').append(html);

注意事项

• 使用tbody作为明确的插入目标更符合HTML规范
• 动态添加的元素如果需要事件委托，应使用on()方法
• 复杂表格建议使用模板引擎如Handlebars或前端框架处理