Heim > Artikel > Web-Frontend > Wie füge ich mithilfe von JavaScript DOM Zeilen zur Tabelle hinzu?
Wie füge ich mithilfe von JavaScript DOM Zeilen zur Tabelle hinzu?
- PHPznach vorne
- 2023-09-16 17:57:071233Durchsuche
我们将学习如何使用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>
Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von JavaScript DOM Zeilen zur Tabelle hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!