js表格操作,DOM实现数据动态增删查改
时间: 2024-03-10 10:46:51 浏览: 13
DOM 实现表格的数据动态增删查改可以参考下面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格操作</title>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
<tr>
<td>小红</td>
<td>20</td>
<td>女</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
</table>
<br>
<form id="myForm">
姓名:<input type="text" name="name"><br>
年龄:<input type="text" name="age"><br>
性别:<input type="text" name="gender"><br>
<button type="button" onclick="addRow()">添加</button>
</form>
<script>
// 添加行
function addRow() {
// 获取表格对象
var table = document.getElementById("myTable");
// 获取表单对象
var form = document.getElementById("myForm");
// 获取表单数据
var name = form.elements["name"].value;
var age = form.elements["age"].value;
var gender = form.elements["gender"].value;
// 创建一行
var row = table.insertRow();
// 创建单元格
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
// 设置单元格内容
cell1.innerHTML = name;
cell2.innerHTML = age;
cell3.innerHTML = gender;
cell4.innerHTML = '<button onclick="deleteRow(this)">删除</button>';
}
// 删除行
function deleteRow(btn) {
// 获取表格对象
var table = document.getElementById("myTable");
// 获取当前行
var row = btn.parentNode.parentNode;
// 删除当前行
table.deleteRow(row.rowIndex);
}
// 修改行
function editRow(btn) {
// 获取表格对象
var table = document.getElementById("myTable");
// 获取当前行
var row = btn.parentNode.parentNode;
// 获取当前行的单元格
var cells = row.getElementsByTagName("td");
// 获取单元格内容
var name = cells[0].innerHTML;
var age = cells[1].innerHTML;
var gender = cells[2].innerHTML;
// 将单元格内容填入表单
var form = document.getElementById("myForm");
form.elements["name"].value = name;
form.elements["age"].value = age;
form.elements["gender"].value = gender;
// 删除当前行
table.deleteRow(row.rowIndex);
}
</script>
</body>
</html>
```
上述代码实现了表格的数据动态增删查改功能,可以根据具体需求进行调整和扩展。