js怎么实现表格的行追加-开发者知识库平台

js怎么实现表格的行追加

1173

2023/8/3 1:20:13

栏目: 编程语言

要在JavaScript中实现表格的行追加，你可以使用以下方法：

使用insertRow()方法在表格中插入新行。

var table = document.getElementById("myTable");
var row = table.insertRow();  // 在表格末尾插入新行

使用insertCell()方法在行中插入新单元格。

var cell1 = row.insertCell();  // 在新行中插入第一个单元格
var cell2 = row.insertCell();  // 在新行中插入第二个单元格

使用innerHTML属性设置单元格的内容。

cell1.innerHTML = "Cell 1";  // 设置第一个单元格的内容
cell2.innerHTML = "Cell 2";  // 设置第二个单元格的内容

完整的代码示例：

<table id="myTable">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();  // 在表格末尾插入新行
var cell1 = row.insertCell();  // 在新行中插入第一个单元格
var cell2 = row.insertCell();  // 在新行中插入第二个单元格
cell1.innerHTML = "Cell 1";  // 设置第一个单元格的内容
cell2.innerHTML = "Cell 2";  // 设置第二个单元格的内容
}
</script>

当点击"Add Row"按钮时，将会在表格中添加一行，并填充两个单元格的内容为"Cell 1"和"Cell 2"。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

js怎么实现表格的行追加

最新知识库

相关标签