使用jQuery和JavaScript高效添加表格行

动态向HTML表格添加行是Web开发中常见的需求，尤其是在构建交互式用户界面时。本教程演示了使用jQuery和纯JavaScript高效实现此目标的方法，您可以根据项目需要选择最合适的方法。

目录

• 使用jQuery的append()和prepend()添加表格行
• 使用纯JavaScript添加表格行

使用jQuery的append()和prepend()添加表格行

jQuery提供了一种简洁高效的方式来操作DOM。其append()和prepend()方法与表格结构无缝集成。

让我们考虑一个示例HTML表格：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    <tr>
  </thead>
  <tbody>
    <!-- 行将在此处添加 -->
  </tbody>
</table>

要使用jQuery添加新行：

// 获取表格主体
let $tableBody = $('#myTable tbody');

// 创建新行
let $newRow = $('<tr>');

// 创建并追加单元格
$newRow.append('<td>新姓名</td>');
$newRow.append('<td>30</td>');

// 将行追加到表格主体
$tableBody.append($newRow); 

此代码片段选择表格主体，创建一个新的行元素，添加数据单元格，并将完整行追加到表格。对于前置（添加到开头），只需使用$tableBody.prepend($newRow);。

对于更复杂的场景或添加多行，直接构建行HTML字符串可能更高效：

let newRowHTML = `<tr><td>另一个姓名</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

请记住对用户提供的数据进行清理，以防止XSS漏洞。

使用纯JavaScript添加表格行

了解原生JavaScript方法可以更深入地理解DOM操作。虽然更冗长，但它避免了外部依赖。

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = '又一个姓名';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

此代码使用标准JavaScript方法直接操作DOM。选择最适合您项目需求和您对jQuery熟悉程度的方法。如果使用jQuery示例，请记住包含jQuery库：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>