如何使用JavaScript DOM向表格添加行？-魔扣目錄

我們將學習如何使用JavaScript dom向表格中添加一行。為了實現這個目標，我們有多種方法。其中一些如下：

使用 insertRow() 方法

通過創建新元素

使用 insertRow() 方法

使用insertRow()方法可以在表格的開頭插入新行。它創建一個新的

語法

table.insertRow(index)

登錄后復制

返回值 ? 被插入的元素。

正如我們所知，一個合適的表格不僅有表格行（<tr>），還有被稱為表格單元格的表格文檔（<td>）。為了在行內插入單元格，我們使用insertCell()方法。它在表格行內創建一個<td>元素。它接受一個數字作為參數，指定該行內單元格的索引。

語法

下面是插入單元格的語法：

table.insertCell(index)

登錄后復制

返回值 ? 被插入的元素。

將一行添加到表格的步驟

獲取數據表元素。

使用insertRow方法創建一行，并將其插入到表格中。

使用insertCell方法創建新的單元格，并將其插入到您創建的行中。

向新創建的單元格中添加數據。

Example

的翻譯為：

示例

在此示例中，我們有一個包含學生姓名及其年齡的表。我們將在表格末尾添加一名新學生。

<!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()方法創建新的行和列。

方法

以下是通過創建元素向表格添加行的步驟。

獲取要添加行的表體元素

創建行元素

創建單元格將數據插入單元格

將單元格添加到行中

追加行到表格主體

Example

的翻譯為：

示例

<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>

登錄后復制

以上就是如何使用JavaScript DOM向表格添加行？的詳細內容，更多請關注www.92cms.cn其它相關文章！