javascript 表格增加行

王林原创: 2023-05-22 13:45:09 488浏览

在Web开发中，表格是一个常见的元素。表格可以用来展示数据、进行数据分析和可视化等。在数据动态地变化时，我们可能需要不断地往表格中添加新的行数据。在JavaScript中，我们可以通过以下方式来动态地增加表格行。

准备工作

在开始编写增加表格行的JavaScript代码之前，我们需要先在HTML文件中定义好表格的基本结构。例如：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

在这个例子中，我们定义了一个包含了两个表格行的表格，并给它指定了一个 id 属性，用来在JavaScript中获取对应的表格元素。

通过DOM操作增加表格行

我们可以通过DOM操作来增加表格行。具体来说，我们需要先获取到表格元素，然后创建一个表格行元素，并将该行添加到表格的 tbody 元素中。

// 获取表格元素
const table = document.getElementById('myTable');

// 创建新的表格行
const newRow = document.createElement('tr');

// 创建新的表格单元格并添加文本内容
const nameCell = document.createElement('td');
nameCell.textContent = 'Tom';
newRow.appendChild(nameCell);

const ageCell = document.createElement('td');
ageCell.textContent = '35';
newRow.appendChild(ageCell);

const cityCell = document.createElement('td');
cityCell.textContent = 'Chicago';
newRow.appendChild(cityCell);

// 将新的行添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.appendChild(newRow);

在这个例子中，我们首先获取了ID为 myTable 的表格元素，然后创建了一个新的表格行元素，并为这一行中的每个单元格添加了文本内容。最后，我们获取了表格的 tbody 元素，并将新的表格行添加到其中。

使用innerHTML增加表格行

除了通过DOM操作来增加表格行外，还可以使用 innerHTML 属性快速地增加一行表格数据。具体来说，我们可以将新的表格行数据写入一个HTML字符串中，然后将该字符串赋值给表格的 innerHTML 属性。

// 获取表格元素
const table = document.getElementById('myTable');

// 定义新的表格行HTML字符串
const newRowHtml = '<tr><td>Tom</td><td>35</td><td>Chicago</td></tr>';

// 将HTML字符串添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.innerHTML += newRowHtml;

在这个例子中，我们先获取了ID为 myTable 的表格元素，然后定义了一个新的表格行HTML字符串。最后，我们获取了表格的 tbody 元素，并将表格行的HTML字符串添加到其中。