資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 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+ 次瀏覽
廣告