JavaScript DOM 如何向表格添加行

在网页开发中，使用 JavaScript DOM（文档对象模型）动态地向表格添加行是一项常见的操作。掌握这一技能可以极大地增强网页的交互性和动态性，为用户提供更好的体验。

要了解 DOM 的基本概念。DOM 是一种用于表示 HTML 或 XML 文档的树形结构，它允许我们通过 JavaScript 来访问和修改文档中的元素。对于表格，我们需要操作的主要元素包括 <table>、<tr>（表格行）和 <td>（表格单元格）。

向表格添加行的第一步是获取表格元素。可以使用 document.getElementById() 方法，前提是表格元素有唯一的 id 属性。例如：

const table = document.getElementById('myTable');

接下来，创建新的表格行元素 <tr>。使用 document.createElement() 方法：

const newRow = document.createElement('tr');

然后，我们需要向新行中添加单元格。同样使用 document.createElement() 方法创建 <td> 元素，并为其设置文本内容。例如，创建两个单元格并设置内容：

const cell1 = document.createElement('td');
cell1.textContent = '单元格内容 1';
const cell2 = document.createElement('td');
cell2.textContent = '单元格内容 2';

将创建好的单元格添加到新行中：

newRow.appendChild(cell1);
newRow.appendChild(cell2);

最后，将新行添加到表格中。可以使用 appendChild() 方法将新行添加到表格的末尾，或者使用 insertBefore() 方法将新行插入到指定位置。如果要添加到末尾：

table.appendChild(newRow);

如果要插入到指定位置，假设我们要将新行插入到表格的第二行（索引为 1）：

const targetRow = table.rows[1];
table.insertBefore(newRow, targetRow);

在实际应用中，我们可能会结合事件监听器来实现用户交互，比如点击按钮添加新行。例如：

<button id="addButton">添加行</button>

const addButton = document.getElementById('addButton');
addButton.addEventListener('click', function() {
  const newRow = document.createElement('tr');
  // 创建单元格并添加内容
  const cell1 = document.createElement('td');
  cell1.textContent = '新单元格 1';
  const cell2 = document.createElement('td');
  cell2.textContent = '新单元格 2';
  newRow.appendChild(cell1);
  newRow.appendChild(cell2);
  table.appendChild(newRow);
});

通过上述步骤，利用 JavaScript DOM 就可以轻松地向表格添加行，为网页带来更多动态交互功能。无论是数据展示还是用户输入，这一技术都具有广泛的应用场景。