JavaScript DOM 表格增删改查
功能说明
- 这是一个基于
DOM 操作实现的表格增删改查小案例。
- 主要实现了：
- 新增表格行
- 删除指定行
- 编辑指定行内容
涉及的核心知识点
document.getElementById()table.rows.lengthinsertRow()insertCell()innerHTMLparentNoderemoveChild()cells[]prompt()
新增数据
核心思路
- 先获取表格对象
- 再获取当前表格的总行数
- 按照末尾位置插入新行
- 再给这一行插入 3 个单元格
- 最后填入默认内容和操作按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
| function addROW() {
var table = document.getElementById("table");
var length = table.rows.length;
var newRow = table.insertRow(length);
var nameCol = newRow.insertCell(0);
var phoneCol = newRow.insertCell(1);
var actionCol = newRow.insertCell(2);
nameCol.innerHTML = '未命名';
phoneCol.innerHTML = '无联系方式';
actionCol.innerHTML = '<button onclick="editROW(this)">编辑</button><button onclick="deleteROW(this)">删除</button>';
}
|
删除数据
核心思路
- 当前点击的是按钮
- 按钮的父节点是
td
td 的父节点是 tr- 找到当前这一行后，再从父节点中移除即可
1
2
3
4
| function deleteROW(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
|
编辑数据
核心思路
- 先找到当前按钮所在的行
- 再通过
cells[0] 和 cells[1] 获取姓名和联系方式单元格
- 使用
prompt() 获取用户输入的新值
- 最后把内容重新写回单元格
1
2
3
4
5
6
7
8
9
10
11
| function editROW(button) {
var row = button.parentNode.parentNode;
var name = row.cells[0];
var phone = row.cells[1];
var inputName = prompt("请输入姓名", name.innerHTML);
var inputPhone = prompt("请输入联系方式", phone.innerHTML);
name.innerHTML = inputName;
phone.innerHTML = inputPhone;
}
|
课堂完整示例代码
HTML 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的增删改查</title>
<style>
table{
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
button {
margin-left: 5px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1 style="text-align: center;">表格的增删改查</h1>
<table id="table">
<tr>
<th>姓名</th>
<th>练习方式</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>123456789</td>
<td>
<button onclick="editROW(this)">编辑</button>
<button onclick="deleteROW(this)">删除</button>
</td>
</tr>
</table>
<button onclick="addROW()">新增数据</button>
<script src="./js/table.js"></script>
</body>
</html>
|
JavaScript 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
function addROW() {
var table = document.getElementById("table");
var length = table.rows.length;
var newRow = table.insertRow(length);
console.log(newRow);
var nameCol = newRow.insertCell(0);
var phoneCol = newRow.insertCell(1);
var actionCol = newRow.insertCell(2);
nameCol.innerHTML = "未命名";
phoneCol.innerHTML = "无联系方式";
actionCol.innerHTML = '<button onclick="editROW(this)">编辑</button><button onclick="deleteROW(this)">删除</button>';
}
function deleteROW(button) {
var row = button.parentNode.parentNode;
console.log(row);
row.parentNode.removeChild(row);
}
function editROW(button) {
var row = button.parentNode.parentNode;
var name = row.cells[0];
var phone = row.cells[1];
var inputName = prompt("请输入姓名", name.innerHTML);
var inputPhone = prompt("请输入联系方式", phone.innerHTML);
name.innerHTML = inputName;
phone.innerHTML = inputPhone;
}
|
知识点总结
- 这是
DOM 操作结合事件处理的综合练习。
- 新增通常用
insertRow() 和 insertCell()。
- 删除通常通过当前按钮反向找到所在行再移除。
- 编辑通常通过
prompt() 获取新值并回写到单元格。
复习表达
表格增删改查是 JavaScript DOM 的常见实战案例。通常先通过 getElementById 获取表格，再通过 insertRow、insertCell 新增数据，通过 parentNode 和 removeChild 删除数据，通过 cells 和 prompt 获取并更新指定单元格内容。这类案例能够体现对 DOM 查询、节点操作和事件绑定的综合掌握。
