我们将学习如何使用javascript dom向表格中添加一行。为了实现这个目标，我们有多种方法。其中一些如下：
使用 insertrow() 方法
通过创建新元素
使用 insertrow() 方法使用insertrow()方法可以在表格的开头插入新行。它创建一个新的a34de1251f0d9fe1e645927f19a896e8元素并将其插入到表格中。它接受一个数字作为参数，指定表格的位置。如果我们不传递任何参数，则在表格的开头插入行。如果您想在表格的最后插入行，则将-1作为参数传递。
语法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向表格添加行？的详细内容。