如何使用JavaScript DOM為表格新增一行？
- PHPz轉載
- 2023-09-16 17:57:071233瀏覽
我們將學習如何使用JavaScript dom在表格中新增一行。為了實現這個目標，我們有多種方法。其中一些如下：
使用 insertRow() 方法
透過建立新元素
#使用 insertRow() 方法
使用insertRow()方法可以在表格的開頭插入新行。它會建立一個新的a34de1251f0d9fe1e645927f19a896e8元素並將其插入到表格中。它接受一個數字作為參數，指定表格的位置。如果我們不傳遞任何參數，則在表格的開頭插入行。如果您想在表格的最後插入行，則將-1作為參數傳遞。
文法
table.insertRow(index)
傳回值 − 被插入的元素。
如我們所知，一個合適的表格不僅有表格行（a34de1251f0d9fe1e645927f19a896e8），還有被稱為表格儲存格的表格文件（b6c5a531a458a2e790c1fd6421739d1c）。為了在行內插入單元格，我們使用insertCell()方法。它在表格行內建立一個b6c5a531a458a2e790c1fd6421739d1c元素。它接受一個數字作為參數，指定該行內單元格的索引。
文法
下面是插入單元格的語法：
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為表格新增一行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！