用HTML写一个增删改查工具
时间: 2024-04-21 11:22:46 浏览: 6
下面是一个简单的使用 HTML 编写的增删改查工具的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>增删改查工具</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
padding: 5px;
width: 200px;
}
input[type="submit"] {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>增删改查工具</h1>
<form id="add-form">
<h2>添加记录</h2>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="age">年龄:</label>
<input type="text" id="age" name="age" required>
<input type="submit" value="添加">
</form>
<table id="record-table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</table>
<script>
// 添加记录
document.getElementById("add-form").addEventListener("submit", function(event) {
event.preventDefault();
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var row = document.createElement("tr");
row.innerHTML = "<td>" + name + "</td><td>" + age + "</td><td><button onclick='deleteRow(this)'>删除</button></td>";
document.getElementById("record-table").appendChild(row);
document.getElementById("name").value = "";
document.getElementById("age").value = "";
});
// 删除记录
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
```
这个示例包含了一个表单用于添加记录,一个表格用于展示已添加的记录,并且每一行都有一个删除按钮。你可以根据需要进一步扩展和改进这个工具。