js表格实现添加、修改、删除
时间: 2023-10-26 21:03:35 浏览: 81
在前端开发中,使用JavaScript可以很方便地实现表格的添加、修改和删除功能。
1. 添加:可以通过JavaScript动态地创建新的表格行,并将新行插入到表格的末尾或是指定的位置。
例如,可以通过以下代码实现在表格的末尾添加一行:
```javascript
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1); // 在表格末尾添加一行
var cell1 = row.insertCell(0); // 插入新单元格
var cell2 = row.insertCell(1);
cell1.innerHTML = "数据1"; // 在新单元格中填充内容
cell2.innerHTML = "数据2";
}
```
2. 修改:可以通过JavaScript来修改指定表格行的内容。
例如,可以通过以下代码修改第一行的内容:
```javascript
function modifyRow() {
var table = document.getElementById("myTable");
var row = table.rows[0]; // 获取第一行
row.cells[0].innerHTML = "新数据1"; // 修改第一行的第一个单元格内容
row.cells[1].innerHTML = "新数据2"; // 修改第一行的第二个单元格内容
}
```
3. 删除:可以通过JavaScript来删除指定的表格行。
例如,可以通过以下代码删除最后一行:
```javascript
function deleteRow() {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
if (rowCount > 1) { // 至少保留一行
table.deleteRow(rowCount - 1); // 删除最后一行
}
}
```
以上就是使用JavaScript实现表格添加、修改和删除的简单示例。根据实际需求,可以根据表格的结构和内容进行相应的调整和扩展。