增删改查
首先看看实现的样式：
当然实现的css和html可以因人而异，每个人喜欢的样式都不一样。具体来理解js部分（上代码）
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<!-- 增删改查按键和搜索框 -->
<div class="all">
<div class="head">
<div class="head_1">
<span>
性别
<select>
<option>--请选择--</option>
</select>
</span>
<span>
姓名
<input type="text" id="search_name"/>
</span>
<span>
联系电话
<input type="text" id="search_tel"/>
</span>
<span class="search" id="h_search">查询</span>
</div>
<div class="head_2">
<span>
排序：年龄：
<select>
<option>--请选择--</option>
<option id="age_up">--升序--</option>
<option id="age_down">--降序--</option>
</select>
</span>
<span>
入职时间：
<select>
<option>--请选择--</option>
</select>
</span>
<span class="add" id="big_add">添加</span>
<span class="delate" id="big_delate">删除</span>
<span class="backon b1none" id="back_big">首页</span>
</div>
</div>
<!-- //列表 -->
<div class="main">
<ul id="add_ul">
<li class="li1">
<span class="span list_1">
<span>全选</span>
<input type="checkbox" id="check_all">
</span>
<span class="span list_2">名称</span>
<span class="span list_3">性别</span>
<span class="span list_4">年龄</span>
<span class="span list_5">联系电话</span>
<span class="span list_6">籍贯</span>
<span class="span list_7">简介</span>
<span class="span list_8">入职时间</span>
<span class="span list_9">操作</span>
</li>
</ul>
</div>
<!-- 分页键 -->
<div class="foot">
</div>
</div>
<!-- 头部添加以及修改的遮罩层 -->
<div class="onbody1 b1none">
<div class="ob1_main">
<div class="ob1_mm">
姓名：<input class="ob1_input" type="text" placeholder="请输入姓名"><br />
性别：<input class="ob1_input" type="text" placeholder="男/女"><br />
年龄：<input class="ob1_input" type="text" placeholder="请输入年龄"><br />
电话：<input class="ob1_input" type="text" placeholder="请输入电话"><br />
籍贯：<input class="ob1_input" type="text" placeholder="请输入籍贯"><br />
简介：<input class="ob1_input" type="text" placeholder="请输入个人简介"><br />
入职时间：<input class="ob1_input" type="text" placeholder="请输入入职时间">
</div>
<span class="ob1_ml" id="affirm">确认</span>
<span class="ob1_ml" id="empty">清空</span>
<a id="onbody1_out">x</a>
</div>
</div>
<!-- 头部删除遮罩层 -->
<div class="onbody2 b1none">
<div class="ob2_main">
<p class="message">确定删除选中数据吗？</p>
<span class="ob1_ml" id="delate_yes">确定</span>
<span class="ob1_ml" id="delate_no">不删</span>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color:#67748B ;
}
ul{
list-style: none;
}
.all{
margin: 50px auto;
width: 800px;
}
/* .head,.head_1,.head_2,.main,.foot{
border: 1px solid red;
} */
.head{
width: 800px;
height: 100px;
}
.main{
width: 800x;
height: 700px;
overflow: hidden;
}
.head_1,.head_2{
width: 800px;
height: 50px;
line-height: 50px;
}
.head span{
margin-right: 40px;
color: white;
}
body .special{
margin-right: 0px;
}
.backon,.delate,body .add,body .search{
margin-top: 10px;
margin-right: 0px;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
color: white;
border-radius: 10px;
float: right;
font-size: 18px;
background-color: cadetblue;
cursor: pointer;
}
.main ul li{
width: 800px;
height: 50px;
border-bottom: 1px solid whitesmoke;
background-color: #EEEEEE;
color: #666666;
}
.li1{
font-size: 18px;
font-weight: 800;
color: royalblue;
}
.span{
float: left;
height: 49px;
text-align: center;
line-height: 50px;
}
.list_1{
width: 30px;
font-size: 10px;
}
.list_2{
width: 70px;
}
.list_3{
width: 50px;
}
.list_4{
width: 50px;
}
.list_5{
width: 150px;
}
.list_6{
width: 100px;
}
.list_7{
width: 200px;
}
.list_8{
width: 100px;
}
.list_9{
width: 50px;
}
.list_1 span{
height: 30px;
display: block;
line-height: 30px;
}
.list_1 span+input{
position: relative;
top: -24px;
}
.change_1,.dela_1{
font-size: 12px;
cursor: pointer;
}
.change_1{
position: relative;
top: -10px;
right: -12px;
}
.dela_1{
position: relative;
bottom: -10px;
left: -12px;
}
.dela_1:hover,.change_1:hover{
color: red;
}
.onbody1,.onbody2{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(250,248,239,0.5);
}
.b1on{
display: block;
}
.b1none{
display: none;
}
.ob1_main{
position: relative;
width: 400px;
height: 300px;
margin:15% auto;
background-color: #DDFFFF;
padding-top: 50px;
}
.ob1_mm{
width: 400px;
height: 200px;
background-color: #6EC3C8;
text-align: center;
line-height: 28px;
color: white;
}
.ob1_mm input:last-child{
margin-right: 30px;
}
.ob1_ml{
display: inline-block;
margin-left: 90px;
margin-top: 10px;
text-align: center;
line-height: 30px;
color: white;
width: 60px;
height: 30px;
background-color: #15AAFB;
border-radius: 4px;
cursor: pointer;
}
.ob1_ml:hover{
background-color: #0C59C1;
}
.ob1_main a{
color: #696969;
font-size: 25px;
position: absolute;
right: 10px;
top: 0px;
cursor: pointer;
}
.ob2_main{
position: relative;
width: 400px;
height: 200px;
margin:15% auto;
background-color: #DDFFFF;
border-radius: 16px;
padding-top: 50px;
}
.message{
color: #EFBB51;
font-size: 20px;
font-weight: 600;
margin-left: 100px;
margin-bottom: 30px;
}
javascript
var data=[["olofmester","男","25","18707277493","湖北武汉","这是一个好人","2019.06.14","secret1"],
["小亮锅","男","25","18707277493","湖北武汉","这是一个好人","2019.06.14","secret2"],
["yellow超","男","25","18707277493","湖北武汉","这是一个好人","2019.06.14","secret3"],
["企鹅","男","23","18707277493","湖北武汉","这是一个好人","2019.06.14","secret4"],
["坨子","男","25","18707277493","湖北武汉","这是一个好人","2019.06.14","secret5"],
["xzxbest","男","21","15927242929","湖北武汉","这是一个好人","2019.06.14","secret6"],
["xyp9x","男","21","15927242929","湖北武汉","这是一个好人","2019.06.14","secret7"]
];
//对库里面的数据进行显示
var secret_many = 7;
var addul = document.getElementById("add_ul");
data_in(data);
function data_in(data){
//全部删除
addul.innerHTML ='<li class="li1">' +
'<span class="span list_1">' +
'<span>全选</span>' +
'<input type="checkbox" id="check_all">' +
'</span>' +
'<span class="span list_2">名称</span>' +
'<span class="span list_3">性别</span>' +
'<span class="span list_4">年龄</span>' +
'<span class="span list_5">联系电话</span>' +
'<span class="span list_6">籍贯</span>' +
'<span class="span list_7">简介</span>' +
'<span class="span list_8">入职时间</span>' +
'<span class="span list_9">操作</span>' +
'</li>'
for (let i = 0; i < data.length; i++) {
var newli = document.createElement("li");
newli.innerHTML = '<span class="span list_1"><input type="checkbox" class="checkone"></span>'+
'<span class="span list_2">'+data[i][0]+'</span>'+
'<span class="span list_3">'+data[i][1]+'</span>'+
'<span class="span list_4">'+data[i][2]+'</span>'+
'<span class="span list_5">'+data[i][3]+'</span>'+
'<span class="span list_6">'+data[i][4]+'</span>'+
'<span class="span list_7">'+data[i][5]+'</span>'+
'<span class="span list_8">'+data[i][6]+'</span>'+
'<span class="span list_9"><a class="change_1">修改</a><a class="dela_1">删除</a></span>'
addul.appendChild(newli);
check_all_one();
list_dela_change();
}
}
//首页
var back_big = document.getElementById("back_big");
back_big.onclick = function(){
change_data = [];
back_big.className = "backon b1none";
big_add.className = "add";
big_delate.className = "delate";
h_search.className = "search";
search_num = 100;
data_in(data);
}
//全选勾框
var check_all;
var checkone;
function check_all_one(){
check_all = document.getElementById("check_all");
checkone = document.getElementsByClassName("checkone");
check_all.onclick = function(){
if (check_all.checked == true) {
for (var i = 0; i < checkone.length; i++) {checkone[i].checked = true;}
}else{
for (var i = 0; i < checkone.length; i++) {checkone[i].checked = false;}
}
}
for (let i = 0; i < checkone.length; i++) {
checkone[i].onclick = function(){
if(!this.checked){
check_all.checked = false;
}
if (c_a() == false) {
check_all.checked = true;
}
}
}
function c_a(){
for (var i = 0; i < checkone.length; i++) {
if(checkone[i].checked == false){
return true;
}
}return false;
}
}
//头部的添加以及添加遮罩层
var big_add = document.getElementById("big_add");
var onbody1 = document.getElementsByClassName("onbody1")[0];
var onbody1_out = document.getElementById("onbody1_out");
var empty = document.getElementById("empty");
var affirm = document.getElementById("affirm");
var ob1_input = document.getElementsByClassName("ob1_input");
big_add.onclick = function(){
affirm_x = true;
onbody1.className = "onbody1 b1on";
}
onbody1_out.onclick = function(){
onbody1.className = "onbody1 b1none";
}
empty.onclick = function(){
for (var i = 0; i < ob1_input.length; i++) {
ob1_input[i].value = "";
}
}
//添加确定键
var affirm_x = true;
affirm.onclick = function(){
if(affirm_x == true){
var data_add = [];
secret_many++;
for (var i = 0; i < ob1_input.length; i++) {
data_add.push(ob1_input[i].value);
ob1_input[i].value = "";
}
data_add.push("secret" + secret_many);
data[data.length] = data_add;
data_in(data);
}else if( affirm_x == false){
var chang_id = data[wherechange][7];
data.splice(wherechange,1);
var data_add = [];
for (var i = 0; i < ob1_input.length; i++) {
data_add.push(ob1_input[i].value);
ob1_input[i].value = "";
}
data_add.push(chang_id);
data.splice(wherechange,0,data_add);
data_in(data);
}else if(affirm_x == -1){
var chang_id = change_data[wherechange][7];
var data_add = [];
change_data.splice(wherechange,1);
for (var i = 0; i < ob1_input.length; i++) {
data_add.push(ob1_input[i].value);
ob1_input[i].value = "";
}
data_add.push(chang_id);
change_data.splice(wherechange,0,data_add)
for (var x = 0; x < data.length; x++) {
if(data[x][7] == chang_id){
data.splice(x,1);
data.splice(x,0,data_add);
break;
}
}
data_in(change_data);
}
onbody1.className = "onbody1 b1none";
}
//头部删除键
var big_delate = document.getElementById("big_delate");
var delate_yes = document.getElementById("delate_yes");
var delate_no = document.getElementById("delate_no");
var onbody2 = document.getElementsByClassName("onbody2")[0];
big_delate.onclick = function(){
onbody2.className = "onbody2 b1on";
}
delate_no.onclick = function(){
onbody2.className = "onbody2 b1none";
for (var i = 0,result = []; i < checkone.length; i++) {
checkone[i].checked = false;
}
}
delate_yes.onclick = function(){
if(search_num == 100){
for (var i = 0,result = []; i < checkone.length; i++) {
if (checkone[i].checked == false) {
result[result.length] = data[i];
}
}
data = result;
data_in(data);
}else if (search_num == -1) {
for (var i = 0,result = []; i < checkone.length; i++) {
if (checkone[i].checked == false) {
result[result.length] = change_data[i];
}else{
for (var x = 0; x < data.length; x++) {
if( data[x][7] == change_data[i][7]){
data.splice(x,1);
}
}
}
}
change_data = result;
data_in(change_data);
}
onbody2.className = "onbody2 b1none";
}
var wherechange = 0;
var dela_1;
var change_1;
function list_dela_change(){
//行中删除键
dela_1 = document.getElementsByClassName("dela_1");
for (let i = 0; i < dela_1.length; i++) {
dela_1[i].onclick = function(){
checkone[i].checked = true;
onbody2.className = "onbody2 b1on";
}
}
//行中修改
change_1 = document.getElementsByClassName("change_1");
for (let i = 0; i < change_1.length; i++) {
change_1[i].onclick = function(){
wherechange = i;
if(search_num == 100){
affirm_x = false;
for (var x = 0; x < ob1_input.length; x++) {
ob1_input[x].value = data[i][x];
}
onbody1.className = "onbody1 b1on";
} else if(search_num == -1){
affirm_x = -1;
for (var x = 0; x < ob1_input.length; x++) {
ob1_input[x].value = change_data[i][x];
}
onbody1.className = "onbody1 b1on";
}
}
}
}
//查询
var change_data = [];
var search_num = 100;
var h_search = document.getElementById("h_search");
var search_name = document.getElementById("search_name");
var search_tel = document.getElementById("search_tel");
h_search.onclick = function(){
search_num = -1;
back_big.className = "backon b1on";
big_add.className = "big_add b1none";
big_delate.className = "delate special";
h_search.className = "search b1none";
for (var i = 0; i < data.length; i++) {
if (search_name.value == "" && search_tel.value == "") {
change_data = data;
break;
}else if (search_name.value == data[i][0] && search_tel.value == data[i][3]) {
change_data.push(data[i]);
}else if(search_name.value == data[i][0] && search_tel.value == ""){
change_data.push(data[i]);
}else if(search_name.value == "" && search_tel.value == data[i][3]){
change_data.push(data[i]);
}else if(search_name.value.length == 1 && search_name.value == data[i][0][0]){
change_data.push(data[i]);
}
}
data_in(change_data);
search_name.value = "";
search_tel.value = "";
}
//年龄升续
var age_up = document.getElementById("age_up");
var age_down = document.getElementById("age_down");
age_up.onclick = function(){
for (var i = 0,result = []; i < data.length; i++) {
result.push(data[i][2]);
}
console.log(result)
}
主要实现的几个地方为：全选、头部删除、行内删除、头部添加、行内修改、头部查询和查询后返回首页。以及需要制作的添加和修改共用的遮罩层，确定删除的遮罩层
要点
1.每一次增删改查的操作都是进行对界面的更新：把页面的数据删除再把操作后的伪数据库里面内容进行显示。
2.行内的修改和删除都为for循环对每层的点击事件，所以要把各自整体包装在一个函数中，在页面更新一次就调用整体一次，不然它执行一次就会释放。
3.注意修改和添加运用的一个遮罩层只是确定键运用不同（点查询后的还会有不同）。
4.点击查询后显示的界面是一个临时的一个data并不影响原data，除非查询后进行了修改或者删除才会同时作用在原data上。
~~~~~~~~ end ~~~~~~~~
