白学的小知识[表格的增删改]

有关表格的增加，删除，修改：

HTML代码如下：

<div class="boss">
			<div class="search">
			    <input type="text" id="searcha"><button id="searchs">搜索</button>
			</div>
			<!-- 表格 -->
			<div class="box1">
				<input class="add" onclick="addClick()" type="button" name="" id="" value="新增" />
				<input class="add" onclick="delClick()" type="button" name="" id="" value="全删" />
				<table border="1" width="600" cellspacing="0" cellpadding="0">
					<tr>
						<th>序号</th>
						<th>选择</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>学号</th>
						<th>手机号</th>
						<th>操作</th>
					</tr>
				</table>
			</div>
			<!-- 新增表单 -->
			<div class="box2">
				<div class="box3">
					<h1 style="color: #fff;">新增表单</h1>
					<label>姓 名</label>
					<input type="text" name="" id="" value="" />
					<br>
					<label>年 龄</label>
					<input type="text" name="" id="" value="" />
					<br>
					<label>性 别</label>
					<input type="text" name="" id="" value="" />
					<br>
					<label>学 号</label>
					<input onblur="schoolBlur(this)" type="text" name="" id="" value="" />
					<br>
					<label>手机号</label>
					<input type="text" name="" id="" value="" />
					<br>
					<input class="inputAdd" onclick="inputAdd()" type="button" name="" id="" value="提交" />
					<input class="cancel" onclick="cancel()" type="button" name="" id="" value="取消" />
				</div>
			</div>
			<!-- 修改表单 -->
			<div class="box4">
				<div class="box5">
					<h1 style="color: #fff;">修改表单</h1>
					<label>姓 名</label>
					<input type="text" name="" id="" value="" />
					<br>
					<label>年 龄</label>
					<input type="text" name="" id="" value="" />
					<br>
					<label>性 别</label>
					<input type="text" name="" id="" value="" />
					<br>
					<label>学 号</label>
					<input onblur="sditBlur(this)" type="text" name="" id="" value="" />
					<br>
					<label>手机号</label>
					<input type="text" name="" id="" value="" />
					<br>
					<input class="inputAdd" onclick="editAdd()" type="button" name="" id="" value="提交" />
					<input class="cancel" onclick="editCancel()" type="button" name="" id="" value="取消" />
				</div>
			</div>
		</div>

CSS代码如下：

		<style type="text/css">
			.box1 {
				width: 600px;
				margin: 0 auto;
			}
			.add {
				width: 80px;
				height: 30px;
			}
			.box2,.box4 {
				width: 100%;
				height: 600px;
				background-color: rgba(0,0,0,0.7);
				position: fixed;
				top: 0;
				left: 0;
				display: none;
			}
			.box3,.box5 {
				width: 600px;
				height: 600px;
				margin: 0 auto;
			}
			.box3 input,.box5 input {
				width: 400px;
				height: 60px;
				margin: 10px 0;
				font-size: 40px;
			}
			.box3 label,.box5 label {
				color: #fff;
				font-size: 40px;
				width: 170px;
				height: 60px;
				display: inline-block;
			}
			.box2 .inputAdd,.box2 .cancel,.box4 .inputAdd,.box4 .cancel {
				width: 200px;
				height: 60px;
				margin-left: 60px;
			}
			.search{
			    position: relative;
				left: 80px;
			    margin:15px auto;
			    width: 500px;
			}
			.search input {
				width: 250px;
				height: 30px;
			}
			#searchs {
				height: 35px;
				width: 50px;
				background-color: aliceblue;
				border: 1px solid black;
			}
		</style>

JS代码如下：

<script type="text/javascript">
		//获取表单
		 var box2 = document.querySelector(".box2");
		 var box4 = document.querySelector(".box4");
		// 获取table
		var table = document.querySelector("table");
		// 获取表单input
		var input = document.querySelectorAll(".box2 input");
		var input4 = document.querySelectorAll(".box4 input");
		// 创建数组---表单原数据
		var arr = [];
		// 新增---显示表单
		function addClick(){
			box2.style.display = "block";
		}
		// 新增验证学号是否唯一
		function schoolBlur(user){
			for(var a=0;a<arr.length;a++){
				if(arr[a].schoolNum.indexOf(user.value)!=-1){
					alert("不能为相同学号")
					user.value = "";
				}
			}
		}
		// 修改验证学号是否唯一
		function sditBlur(user){
			for(var a=0;a<arr.length;a++){
				if(arr[a].schoolNum.indexOf(user.value)!=-1){
					alert("不能为相同学号")
					user.value = "";
				}
			}
		}
		// 新增清空
		function clearing(){
			for(var x=0;x<input.length-2;x++){
				input[x].value="";
			}
		}
		// 表单新增---提交数据
		function inputAdd(){
			for(var j=0;j<input.length-2;j++){
				if(input[j].value==""||input[j].value==null||input[j].value==undefined){
					alert("请填写所有表单信息！");
					return false;
				}
			}
			var obj = {
				name:"",
				age:"",
				sex:"",
				schoolNum:"",
				iphone:""
			}
			var num = 0;
			for(var i in obj){
				obj[i] = input[num++].value
			}
			arr.push(obj);
			//获取tr
			var trXU=document.querySelectorAll("tr")
			//创建序号的td
			var tdXu =document.createElement("td")
			// for(var i=0;i<arr.length;i++){
			// 	tdXu.innerHTML=arr.length
			// }
			// 创建tr
			var tr = document.createElement("tr");
			function fn(){
				for(var i=0;i<arr.length;i++){
				tdXu.innerHTML="<p class='XuHao'>"+arr.length+"</p>"
				}
				// xu()
			}
			fn()
			tr.appendChild(tdXu)
			// 创建复选框td
			var tdCheck = document.createElement("td");
			tdCheck.innerHTML = "<input type='checkbox'>";
			tr.appendChild(tdCheck);
			// 创建输入的表单信息
			for(var a=0;a<5;a++){
				var td = document.createElement("td");
				var text = document.createTextNode(input[a].value);
				td.appendChild(text);
				tr.appendChild(td);
			}
			// 创建td--操作
			var tdButton = document.createElement("td");
			tdButton.innerHTML = "<input type='button' onclick='editClick(this)' value='修改' />"
			+"<input type='button' value='删除' onclick='trDel(this)' />";
			// 把td添加到tr
			tr.appendChild(tdButton);
			// 把tr添加到table
			table.appendChild(tr);
			box2.style.display = "none";
			clearing();
			xu()
		}
		// 表单取消
		function cancel(){
			box2.style.display = "none";
		}
		// 修改
		var thisEdit;
		function editClick(user){
			thisEdit = user;
			var trNode = user.parentNode.parentNode;
			for(var i=2;i<trNode.childNodes.length-1;i++){
				input4[i-2].value = trNode.childNodes[i].innerHTML;
			}
			box4.style.display = "block";
		}
		// 修改提交
		function editAdd (){
			var trNode = thisEdit.parentNode.parentNode;
			for(var i=2;i<trNode.childNodes.length-1;i++){
				trNode.childNodes[i].innerHTML=input4[i-2].value;
				for(var j=0;j<arr.length;j++){
					if(arr[j].schoolNum==trNode.childNodes[5].innerHTML){
						// for(var k in arr){
						// 	arr[k]=input4[j].value
						// }
						arr[j].name = input4[0].value;
						arr[j].age = input4[1].value;
						arr[j].sex = input4[2].value;
						arr[j].schoolNum = input4[3].value;
						arr[j].iphone = input4[4].value;
					}
				}
			}
			console.log(arr);
			box4.style.display = "none";
		}
		// 修改取消
		function editCancel (){
			box4.style.display = "none";
		}
		// 单行删除
		function trDel(user){
			var delNode = user.parentNode.parentNode;
			// var xuNode =user.parentNode.parentNode.firstChild;
			console.log(delNode.childNodes[5].innerHTML);
			for(var a=0;a<arr.length;a++){
				if(arr[a].schoolNum==delNode.childNodes[5].innerHTML){
					arr.splice(a,1);
				}
			}
			delNode.remove();
			console.log(arr);
			xu()
		}
		// 全删
		function delClick(){
			var tr = document.querySelectorAll("tr");
			if(tr.length<2){
				alert("数据条数为0,请新增数据");
			}
			for(var a=1;a<tr.length;a++){
				// checked获取复选框的选择值
				for(var b=0;b<arr.length;b++){
					if(tr[a].childNodes[1].firstChild.checked==true&&arr[b].schoolNum==tr[a].childNodes[5].innerHTML){
						tr[a].remove();
						arr.splice(b,1)
					}
					
				}
			}
			xu()
		}
		//获取序号的所有的td
		var xuLietd=document.querySelectorAll(".XuHao")
		function xu(){
			var xuLietd=document.querySelectorAll(".XuHao")
			for(var i =0;i<xuLietd.length;i++){
				xuLietd[i].innerHTML=i+1
			}
		}
		var searchs=document.getElementById("searchs");
		searchs.onclick=function(){
		    var search = document.getElementById("searcha");
			//把搜索框的值存起来
			var Sea = search.value;
		    td = document.getElementsByTagName("td");
			//获取tr 
			tr =document.querySelectorAll("tr")
			for (var a=1;a<tr.length;a++)
			{
				tr[a].remove();
			}
		}	
	</script>

 样式：

表格的增删改