写一个关于增删改查的JS且包括网页
时间: 2023-04-06 14:01:46 浏览: 54
好的,我可以回答这个问题。增删改查是指对数据进行增加、删除、修改和查询操作。在JS中,可以使用数组或对象来存储数据,并通过函数来实现增删改查操作。以下是一个简单的示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>增删改查</title>
<script src="script.js"></script>
</head>
<body>
<h1>增删改查</h1>
<form>
<label>姓名:</label>
<input type="text" id="name">
<label>年龄:</label>
<input type="number" id="age">
<button type="button" onclick="add()">添加</button>
<button type="button" onclick="del()">删除</button>
<button type="button" onclick="update()">修改</button>
<button type="button" onclick="search()">查询</button>
</form>
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
</body>
</html>
```
JS代码:
```
var data = []; // 存储数据的数组
function add() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
data.push({name: name, age: age}); // 添加数据到数组中
show(); // 显示数据
}
function del() {
var name = document.getElementById("name").value;
for (var i = 0; i < data.length; i++) {
if (data[i].name == name) {
data.splice(i, 1); // 删除数据
break;
}
}
show(); // 显示数据
}
function update() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
for (var i = 0; i < data.length; i++) {
if (data[i].name == name) {
data[i].age = age; // 修改数据
break;
}
}
show(); // 显示数据
}
function search() {
var name = document.getElementById("name").value;
for (var i = 0; i < data.length; i++) {
if (data[i].name == name) {
alert("姓名:" + data[i].name + ",年龄:" + data[i].age); // 查询数据
break;
}
}
}
function show() {
var table = document.getElementById("table");
table.innerHTML = "<tr><th>姓名</th><th>年龄</th></tr>";
for (var i = 0; i < data.length; i++) {
table.innerHTML += "<tr><td>" + data[i].name + "</td><td>" + data[i].age + "</td></tr>"; // 显示数据
}
}
```
这段代码实现了一个简单的增删改查功能,通过表单输入姓名和年龄,点击相应的按钮可以对数据进行操作,并在表格中显示数据。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)