天天看點
傳回

僞資料庫的增删改查增删改查htmlcssjavascript~~~~~~~~ end ~~~~~~~~

增删改查

增删改查的表格連結

首先看看實作的樣式：

僞資料庫的增删改查增删改查htmlcssjavascript~~~~~~~~ end ~~~~~~~~

當然實作的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)
}

主要實作的幾個地方為：全選、頭部删除、行内删除、頭部添加、行内修改、頭部查詢和查詢後傳回首頁。以及需要制作的添加和修改共用的遮罩層，确定删除的遮罩層

僞資料庫的增删改查增删改查htmlcssjavascript~~~~~~~~ end ~~~~~~~~
僞資料庫的增删改查增删改查htmlcssjavascript~~~~~~~~ end ~~~~~~~~

要點

1.每一次增删改查的操作都是進行對界面的更新：把頁面的資料删除再把操作後的僞資料庫裡面内容進行顯示。

2.行内的修改和删除都為for循環對每層的點選事件，是以要把各自整體包裝在一個函數中，在頁面更新一次就調用整體一次，不然它執行一次就會釋放。

3.注意修改和添加運用的一個遮罩層隻是确定鍵運用不同（點查詢後的還會有不同）。

4.點選查詢後顯示的界面是一個臨時的一個data并不影響原data，除非查詢後進行了修改或者删除才會同時作用在原data上。

~~~~~~~~ end ~~~~~~~~

javascript 增删改查
上一篇: FluentData微型ORM　1、下載下傳　2、使用
下一篇: 軟體工程有多名大三同學被海頤軟體錄取為實習生

繼續閱讀