增删改查
增删改查对于学前端的来说,可以说是必修课,在很多的网站中都会遇见这种功能,那么今天,我们就来看看如何使用js来实现正删改查。
首先,我们先模拟一个后台数据,如下:
var data = [
{
"0":"李白",
"1":"男",
"2":"12",
"3":"123456",
"4":"我是李白"
},
{
"0":"小乔",
"1":"女",
"2":"14",
"3":"123451",
"4":"我是小乔"
},
{
"0":"凯",
"1":"男",
"2":"20",
"3":"123452",
"4":"我是凯"
},
{
"0":"韩信",
"1":"男",
"2":"40",
"3":"123453",
"4":"我是韩信"
},
{
"0":"夸父",
"1":"女",
"2":"18",
"3":"123454",
"4":"我是夸父"
},
{
"0":"后裔",
"1":"男",
"2":"12",
"3":"123455",
"4":"我是后裔"
},
{
"0":"阿狸",
"1":"男",
"2":"50",
"3":"123456",
"4":"我是阿狸"
},
{
"0":"李元芳",
"1":"女",
"2":"32",
"3":"223456",
"4":"我是李元芳"
},
{
"0":"诸葛亮",
"1":"男",
"2":"22",
"3":"323456",
"4":"我是诸葛亮"
},
{
"0":"典韦",
"1":"男",
"2":"30",
"3":"423456",
"4":"我是典韦"
}
]
后台数据模拟好了以后就可以开始写了,在写之前,先使用HTML来建立一个表格,当然,也可以使用纯js来写,先创建元素在添加到页面上,在这里我们不做介绍,有兴趣的可以自己去写。表格建立如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
tr{
border: 1px solid;
display: "";
}
th{
border: 1px solid;
width: 111px;
}
td{
border: 1px solid;
text-align: center;
}
table{
border: 1px solid;
}
.tianjia{
width: 260px;
height: 300px;
border: 1px solid;
}
p{
margin-left: 10px;
margin-top: 25px;
}
.x1{
margin-left: 30px;
}
.x3{
margin-left: 30px;
}
.qud{
margin-left: 55px;
}
.xiu{
margin-left: 55px;
}
.tianjia{
position: absolute;
margin-left: 300px;
z-index: 1;
background-color: #eee;
display: none;
}
.zzc{
position: absolute;
width: 1000px;
height: 800px;
background-color: #111;
opacity: 0.4;
display: none;
}
.xiugai{
width: 260px;
height: 300px;
border: 1px solid;
position: absolute;
margin-left: 300px;
z-index: 1;
background-color: #eee;
display: none;
}
</style>
<body>
<div class="zzc"></div>
姓名:<input type="text" name="" value="请输入">
性别:<input type="text" name="" value="请输入">
电话:<input type="text" name="" value="请输入">
<button class="chaxun">查询</button>
<button class = "tianjia1">添加</button>
<button class="sanchu">删除</button>
<table>
<thead>
<tr class="tt1">
<th>
<input type="checkbox" class="quax1">
<span>全选</span>
</th>
<th>
<span>姓名</span