javascript 表格增加行-前端问答-PHP中文网

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

准备工作

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

   Name  Age  City  
 
   John  25  New York  
  Jane  30  Los Angeles

Name	Age	City
John	25	New York
Jane	30	Los Angeles

登录后复制

在这个例子中，我们定义了一个包含了两个表格行的表格，并给它指定了一个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 = 'Tom35Chicago'; // 将HTML字符串添加到表格中 const tbody = table.getElementsByTagName('tbody')[0]; tbody.innerHTML += newRowHtml;

登录后复制

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