html网页制作表格代码,能增删改
时间: 2023-08-07 07:05:16 浏览: 51
以下是一个简单的 HTML 表格代码,可以进行增删改操作:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
</head>
<body>
<h2>学生成绩表</h2>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>操作</th>
</tr>
<tr>
<td>小明</td>
<td>85</td>
<td>90</td>
<td>80</td>
<td><button onclick="updateRow(this)">修改</button> <button onclick="deleteRow(this)">删除</button></td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>95</td>
<td>85</td>
<td><button onclick="updateRow(this)">修改</button> <button onclick="deleteRow(this)">删除</button></td>
</tr>
<tr>
<td colspan="4"><input type="text" id="name" placeholder="姓名"></td>
<td><button onclick="addRow()">添加</button></td>
</tr>
</table>
<script>
function addRow() {
var table = document.querySelector("table");
var name = document.querySelector("#name").value;
if (!name) {
alert("请输入姓名");
return;
}
var newRow = table.insertRow(-1);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
cell1.innerHTML = name;
cell2.innerHTML = "";
cell3.innerHTML = "";
cell4.innerHTML = "";
cell5.innerHTML = "<button onclick='updateRow(this)'>修改</button> <button onclick='deleteRow(this)'>删除</button>";
document.querySelector("#name").value = "";
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function updateRow(button) {
var row = button.parentNode.parentNode;
var cells = row.cells;
for (var i = 1; i <= 3; i++) {
var value = prompt("请输入" + cells[i].innerHTML + "的值", cells[i].innerHTML);
if (value != null) {
cells[i].innerHTML = value;
}
}
}
</script>
</body>
</html>
```
这个表格包括了一个表头和两行数据,每一行都有一个“修改”按钮和一个“删除”按钮。最后一行是一个“添加”按钮和一个文本框,可以用它来增加新的行。JavaScript 代码包括了三个函数:addRow、deleteRow 和 updateRow,分别用于添加行、删除行和修改行。其中,添加行和删除行比较简单,修改行需要弹出一个输入框让用户输入新的值。