jquery如何增加一行<tr>

发布时间：2021-11-17 13:31:30 作者：iii
来源：亿速云阅读：178

# jQuery如何增加一行<tr>

## 前言

在Web开发中，动态操作表格是常见的需求。使用jQuery可以快速高效地实现表格行的增删改查操作。本文将详细介绍如何使用jQuery在表格中动态添加一行`<tr>`，包括多种实现方式和实际应用场景。

---

## 基础方法

### 1. append() 方法

最基础的方式是使用`append()`方法向`<tbody>`添加新行：

```javascript
$('#myTable tbody').append(
  '<tr><td>新数据1</td><td>新数据2</td></tr>'
);

2. 使用模板字符串（ES6）

现代JavaScript推荐使用模板字符串：

const rowData = {
  id: 101,
  name: "新产品"
};

$('#myTable tbody').append(`
  <tr>
    <td>${rowData.id}</td>
    <td>${rowData.name}</td>
  </tr>
`);

高级技巧

3. 克隆现有行

当需要复制现有行结构时：

const $lastRow = $('#myTable tr:last');
const $newRow = $lastRow.clone();

$newRow.find('td').eq(0).text('新值');
$('#myTable tbody').append($newRow);

4. 使用jQuery对象创建

更规范的DOM操作方式：

const $newRow = $('<tr>')
  .append($('<td>').text('内容1'))
  .append($('<td>').text('内容2'));

$('#myTable').append($newRow);

性能优化

5. 文档片段(DocumentFragment)

批量添加时建议使用：

const fragment = document.createDocumentFragment();

for(let i=0; i<10; i++){
  const $row = $('<tr>').html(`<td>项目${i}</td>`);
  fragment.appendChild($row[0]);
}

$('#myTable')[0].appendChild(fragment);

6. 延迟DOM操作

先构建完整HTML再插入：

let rowsHtml = '';
data.forEach(item => {
  rowsHtml += `<tr><td>${item.id}</td><td>${item.name}</td></tr>`;
});

$('#myTable tbody').html(rowsHtml);

实际应用场景

场景1：表单提交后添加行

$('#addForm').submit(function(e){
  e.preventDefault();
  
  const formData = $(this).serializeArray();
  const newRow = formData.reduce((html, field) => {
    return html + `<td>${field.value}</td>`;
  }, '<tr>') + '</tr>';
  
  $('#dataTable tbody').append(newRow);
});

场景2：AJAX数据加载

$.get('/api/products', function(data){
  const rows = data.map(product => `
    <tr>
      <td>${product.id}</td>
      <td>${product.name}</td>
      <td>$${product.price}</td>
    </tr>
  `).join('');
  
  $('#productTable tbody').html(rows);
});

注意事项

表格结构完整性：确保始终在<tbody>内添加行

事件委托：对新添加的行使用事件委托


$('#myTable').on('click', 'tr', function(){
 console.log('行被点击');
});

内存管理：移除表格时清理事件监听
XSS防护：对动态内容使用.text()而非.html()

浏览器兼容性

所有方法在现代浏览器和IE9+均可使用。如需支持更旧版本：

// IE8兼容方案
var row = document.createElement('tr');
row.innerHTML = '<td>兼容内容</td>';
document.getElementById('oldTable').appendChild(row);

总结

jQuery提供了多种灵活的方式操作表格行，开发者可以根据具体需求选择： - 简单场景：直接使用append()+HTML字符串 - 复杂场景：采用jQuery对象构建方式 - 批量操作：优先考虑文档片段

通过合理选择方法，可以构建出高效、可维护的动态表格功能。 “`