如何使用JavaScript DOM向表格添加行？

我们将学习如何使用JavaScript dom向表格中添加一行。为了实现这个目标，我们有多种方法。其中一些如下：

• 使用 insertRow() 方法

• 通过创建新元素

使用 insertRow() 方法

使用insertRow()方法可以在表格的开头插入新行。它创建一个新的元素并将其插入到表格中。它接受一个数字作为参数，指定表格的位置。如果我们不传递任何参数，则在表格的开头插入行。如果您想在表格的最后插入行，则将-1作为参数传递。

语法

table.insertRow(index)

返回值 − 被插入的元素。

正如我们所知，一个合适的表格不仅有表格行（

），还有被称为表格单元格的表格文档（）。为了在行内插入单元格，我们使用insertCell()方法。它在表格行内创建一个 元素。它接受一个数字作为参数，指定该行内单元格的索引。

语法

下面是插入单元格的语法：

table.insertCell(index)

返回值 − 被插入的元素。

将一行添加到表格的步骤

• 获取数据表元素。

• 使用insertRow方法创建一行，并将其插入到表格中。

• 使用insertCell方法创建新的单元格，并将其插入到您创建的行中。

• 向新创建的单元格中添加数据。

Example

的翻译为：

示例

在此示例中，我们有一个包含学生姓名及其年龄的表。我们将在表格末尾添加一名新学生。

   <title> Example- add rows to a table using JavaScript DOM </title><style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style><h2> Adding rows to a table using JavaScript DOM </h2>
   <p> Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>

Name	Age	City
Alex	20	New York
Tim	18	Boston
Mark	23	San Diego

<script> function addRow() { // Get the table element in which you want to add row let table = document.getElementById("myTable"); // Create a row using the inserRow() method and // specify the index where you want to add the row let row = table.insertRow(-1); // We are adding at the end // Create table cells let c1 = row.insertCell(0); let c2 = row.insertCell(1); let c3 = row.insertCell(2); // Add data to c1 and c2 c1.innerText = "Elon" c2.innerText = 45 c3.innerText = "Houston" } </script>

通过创建新元素

在这种方法中，我们将使用document.createElement()方法创建新的行和列。

方法

以下是通过创建元素向表格添加行的步骤。

• 获取要添加行的表体元素

• 创建行元素

• 创建单元格将数据插入单元格

• 将单元格添加到行中

• 追加行到表格主体

Example

的翻译为：

示例

   <title> Example- add rows to a table using JavaScript DOM </title><style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style><h2> Adding rows to a table using JavaScript DOM </h2>
   <p>Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>

Name	Age	City	Course
Alex	20	New York	Java
Tim	18	Boston	Python
Mark	23	San Diego	JavaScript

<script> function addRow() { // Get the table body element in which you want to add row let table = document.getElementById("tableBody"); // Create row element let row = document.createElement("tr") // Create cells let c1 = document.createElement("td") let c2 = document.createElement("td") let c3 = document.createElement("td") let c4 = document.createElement("td") // Insert data to cells c1.innerText = "Elon" c2.innerText = "42" c3.innerText = "Houston" c4.innerText = "C++" // Append cells to row row.appendChild(c1); row.appendChild(c2); row.appendChild(c3); row.appendChild(c4); // Append row to table body table.appendChild(row) } </script>

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南