html动态生成表格,增删改查
时间: 2023-07-06 16:34:15 浏览: 57
下面是一个示例代码,展示如何使用JavaScript动态生成表格,并实现增删改查的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态生成表格</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body>
<button onclick="addRow()">添加行</button>
<button onclick="editRow()">编辑行</button>
<button onclick="deleteRow()">删除行</button>
<div id="table-container"></div>
<script>
var tableData = [
{ name: "张三", age: 25, gender: "男" },
{ name: "李四", age: 30, gender: "女" },
{ name: "王五", age: 20, gender: "男" },
{ name: "赵六", age: 35, gender: "女" }
];
var selectedRow = null;
function generateTable() {
// 获取容器元素
var container = document.getElementById("table-container");
// 创建表格元素
var table = document.createElement("table");
// 创建表头行
var headerRow = document.createElement("tr");
// 创建表头单元格
var headerCell1 = document.createElement("th");
headerCell1.innerHTML = "姓名";
headerRow.appendChild(headerCell1);
var headerCell2 = document.createElement("th");
headerCell2.innerHTML = "年龄";
headerRow.appendChild(headerCell2);
var headerCell3 = document.createElement("th");
headerCell3.innerHTML = "性别";
headerRow.appendChild(headerCell3);
// 将表头行添加到表格中
table.appendChild(headerRow);
// 循环遍历数据,创建数据行和单元格
for (var i = 0; i < tableData.length; i++) {
var dataRow = document.createElement("tr");
var dataCell1 = document.createElement("td");
dataCell1.innerHTML = tableData[i].name;
dataRow.appendChild(dataCell1);
var dataCell2 = document.createElement("td");
dataCell2.innerHTML = tableData[i].age;
dataRow.appendChild(dataCell2);
var dataCell3 = document.createElement("td");
dataCell3.innerHTML = tableData[i].gender;
dataRow.appendChild(dataCell3);
// 为数据行添加点击事件,选中该行
dataRow.addEventListener("click", function() {
if (selectedRow !== null) {
selectedRow.style.backgroundColor = "";
}
selectedRow = this;
selectedRow.style.backgroundColor = "yellow";
});
table.appendChild(dataRow);
}
// 将表格添加到容器中
container.appendChild(table);
}
function addRow() {
// 创建新的数据行
var dataRow = document.createElement("tr");
var dataCell1 = document.createElement("td");
dataCell1.innerHTML = "新姓名";
dataRow.appendChild(dataCell1);
var dataCell2 = document.createElement("td");
dataCell2.innerHTML = "新年龄";
dataRow.appendChild(dataCell2);
var dataCell3 = document.createElement("td");
dataCell3.innerHTML = "新性别";
dataRow.appendChild(dataCell3);
// 将新的数据行插入到表格中
var table = document.getElementsByTagName("table")[0];
table.appendChild(dataRow);
// 为新的数据行添加点击事件,选中该行
dataRow.addEventListener("click", function() {
if (selectedRow !== null) {
selectedRow.style.backgroundColor = "";
}
selectedRow = this;
selectedRow.style.backgroundColor = "yellow";
});
// 将新的数据添加到数据数组中
tableData.push({
name: "新姓名",
age: "新年龄",
gender: "新性别"
});
}
function editRow() {
if (selectedRow === null) {
alert("请先选择要编辑的行!");
return;
}
// 获取选中行的数据
var name = selectedRow.cells[0].innerHTML;
var age = selectedRow.cells[1].innerHTML;
var gender = selectedRow.cells[2].innerHTML;
// 弹出对话框,让用户输入新的数据
var newName = prompt("请输入姓名", name);
var newAge = prompt("请输入年龄", age);
var newGender = prompt("请输入性别", gender);
if (newName === null || newName === "") {
alert("姓名不能为空!");
return;
}
if (newAge === null || newAge === "") {
alert("年龄不能为空!");
return;
}
if (newGender === null || newGender === "") {
alert("性别不能为空!");
return;
}
// 更新选中行的数据
selectedRow.cells[0].innerHTML = newName;
selectedRow.cells[1].innerHTML = newAge;
selectedRow.cells[2].innerHTML = newGender;
// 更新数据数组中对应的数据
var index = selectedRow.rowIndex - 1;
tableData[index].name = newName;
tableData[index].age = newAge;
tableData[index].gender = newGender;
}
function deleteRow() {
if (selectedRow === null) {
alert("请先选择要删除的行!");
return;
}
// 从表格中删除选中行
var table = document.getElementsByTagName("table")[0];
table.deleteRow(selectedRow.rowIndex);
// 从数据数组中删除对应的数据
var index = selectedRow.rowIndex - 1;
tableData.splice(index, 1);
selectedRow = null;
}
generateTable();
</script>
</body>
</html>
```
在上面的代码中,我们使用JavaScript动态创建了一个包含表头和初始数据的表格,并实现了增加行、编辑行、删除行、选中行等功能。您可以根据需要修改表格中的数据和样式,以及增加其他功能。