如何使用 JavaScript DOM 向表中添加行？
htmljavascriptprogramming scripts
我们将学习如何使用 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>
