编写一个HTML具有增删改查功能按钮的表格
时间: 2024-01-15 08:04:36 浏览: 24
可以参考以下代码实现:
```
<!DOCTYPE html>
<html>
<head>
<title>增删改查表格</title>
</head>
<body>
<h2>增删改查表格</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="age">年龄:</label>
<input type="text" id="age" name="age">
<label for="gender">性别:</label>
<input type="text" id="gender" name="gender">
<button type="submit" onclick="addRow()">添加</button>
<button type="button" onclick="updateRow()">修改</button>
<button type="button" onclick="deleteRow()">删除</button>
<button type="button" onclick="clearForm()">清空</button>
</form>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</tbody>
</table>
<script>
// 添加行
function addRow() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
if (name && age && gender) {
var table = document.getElementById("data");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = name;
cell2.innerHTML = age;
cell3.innerHTML = gender;
clearForm();
} else {
alert("请填写完整信息!");
}
}
// 删除行
function deleteRow() {
var table = document.getElementById("data");
var rowCount = table.rows.length;
for (var i = rowCount - 1; i > 0; i--) {
var row = table.rows[i];
var checkbox = row.cells[3].getElementsByTagName("input")[0];
if (checkbox.checked == true) {
table.deleteRow(i);
}
}
}
// 修改行
function updateRow() {
var table = document.getElementById("data");
var rowCount = table.rows.length;
for (var i = rowCount - 1; i > 0; i--) {
var row = table.rows[i];
var checkbox = row.cells[3].getElementsByTagName("input")[0];
if (checkbox.checked == true) {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
if (name && age && gender) {
row.cells[0].innerHTML = name;
row.cells[1].innerHTML = age;
row.cells[2].innerHTML = gender;
clearForm();
} else {
alert("请填写完整信息!");
}
}
}
}
// 清空表单
function clearForm() {
document.getElementById("name").value = "";
document.getElementById("age").value = "";
document.getElementById("gender").value = "";
}
</script>
</body>
</html>
```
在这个表格中,我们使用了一个表单来输入数据,并且添加了“添加”、“删除”、“修改”、“清空”四个按钮。同时,每一行也有一个复选框来表示该行是否被选中。在 JavaScript 中,我们可以通过表格的 `insertRow` 方法、`deleteRow` 方法和 `innerHTML` 属性来实现增删改查操作。同时也要注意表单输入的数据的合法性检查。