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

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

  • 使用 insertRow() 方法

  • 通过创建新的元素

使用 insertRow() 方法

inserRow() 方法用于在表格开头插入新行。它创建一个新的 <tr> 元素 并将其插入表格中。它接受一个数字作为参数，指定表格的位置。如果我们不传递任何参数，则它会在表格开头插入行。如果要将行插入表格末尾，则将 -1 作为参数传递。

语法

table.insertRow(index)

返回值 - 插入的元素。

众所周知，一个完整的表格不仅包含表格行 (<tr>)，还包含表格文档 (<td>)，它们被称为表格单元格。要将单元格插入行中，我们使用 insertCell() 方法。它在表格行内创建一个 <td> 元素。它接受一个数字作为参数，指定该行内单元格的索引。

语法

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

table.insertCell(index)

返回值 - 插入的元素。

向表格添加行的步骤

  • 获取数据表格元素。

  • 使用 insertRow() 方法创建一行并将其插入表格。

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

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

示例

在本例中，我们有一个表格，其中包含学生姓名和年龄。我们在表格末尾添加了一名新学生。

<!DOCTYPE html>
<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <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>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
      </thead>
      <tbody>
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
         </tr>
      </tbody>
   </table>
</body>
<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>
</html>

通过创建新元素

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

方法

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

  • 获取要向其中添加行的表格主体元素

  • 创建行元素

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

  • 将单元格附加到行

  • 将行附加到表格主体

示例

<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <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>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
         <th> Course </th>
      </thead>
      <tbody id="tableBody">
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
            <td> Java </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
            <td> Python </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
            <td> JavaScript </td>
         </tr>
      </tbody>
   </table>
</body>
<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>
</html>

更新时间： 2023年9月12日

43K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告