我们将学习如何使用JavaScript dom向表格中添加一行。为了实现这个目标,我们有多种方法。其中一些如下:
使用 insertRow() 方法
通过创建新元素
使用insertRow()方法可以在表格的开头插入新行。它创建一个新的 返回值 − 被插入的元素。 正如我们所知,一个合适的表格不仅有表格行( 下面是插入单元格的语法: 返回值 − 被插入的元素。 获取数据表元素。 使用insertRow方法创建一行,并将其插入到表格中。 使用insertCell方法创建新的单元格,并将其插入到您创建的行中。 向新创建的单元格中添加数据。 在此示例中,我们有一个包含学生姓名及其年龄的表。我们将在表格末尾添加一名新学生。 在这种方法中,我们将使用document.createElement()方法创建新的行和列。 以下是通过创建元素向表格添加行的步骤。 获取要添加行的表体元素 创建行元素 创建单元格将数据插入单元格 将单元格添加到行中 追加行到表格主体 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!元素并将其插入到表格中。它接受一个数字作为参数,指定表格的位置。如果我们不传递任何参数,则在表格的开头插入行。如果您想在表格的最后插入行,则将-1作为参数传递。
语法
table.insertRow(index)
),还有被称为表格单元格的表格文档( )。为了在行内插入单元格,我们使用insertCell()方法。它在表格行内创建一个 元素。它接受一个数字作为参数,指定该行内单元格的索引。 语法
table.insertCell(index)
将一行添加到表格的步骤
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>
通过创建新元素
方法
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>