极客笔记如何使用JavaScript DOM添加表格行
我们将学习如何使用JavaScript DOM添加表格行。为了实现这个目标，我们有多种方法。以下是其中一些方法。
- 使用 insertRow() 方法
-
创建新元素
使用insertRow()方法
insertRow()方法用于在表格开头插入新行。它创建一个新的 <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>