疫情期间学习一下原生js表格

疫情期间学习一下原生js表格

 用了一个晚上写了写一个表格功能的增删改查，有小白的小朋友可以多看看！

//这是js文件
window.onload = function(){
	document.querySelector('#btnAdd').addEventListener('click',add);
	document.querySelector('#btnUpdate').addEventListener('click',update);
	document.querySelector('#btnRemove').addEventListener('click',removeAll);
	document.querySelector('#chk').addEventListener('click',selectAll);
	document.querySelector('#btnSearch').addEventListener('click',search);
	document.querySelector('#btnClean').addEventListener('click',clean);
}


function clean(){
	let uid=document.querySelector("#uid");
	let uname=document.querySelector('#uname');
	let umajor=document.querySelector("#umajor");
	uid.value='';
	uname.value='';
	umajor.value='';
	uid.disabled=false;
}
function search(){
	let uid=document.querySelector("#uid");
	let uname=document.querySelector('#uname');
	let umajor=document.querySelector("#umajor");
	id=uid.value;
	name=uname.value;
	major=umajor.value;
	if(id==''&&name==''&&major=='') return;
	let tb=document.querySelector('#tb');
	let rows=Array.from(tb.rows);//转换成数组
	if(id!=''){
		rows.forEach(function(value){
			if(value.cells[1].innerHTML==id){
				value.style.backgroundColor='red';
			}
		})
	}else if(name!=''){
		//模糊查询
		rows.forEach(function(value){
			if(value.cells[2].innerHTML.includes(name)){ //include字符串
				value.style.backgroundColor='red';
			}
		})
	}else if(major!=''){
		//模糊查询
		rows.forEach(function(value){
			if(value.cells[3].innerHTML.includes(major)){
				value.style.backgroundColor='red';
			}
		})
	}
	
	
	
}
function removeAll(){
	let chk=document.querySelector('#chk');
	//找到表格中所有的复选框
	let tb=document.querySelector('#tb');
	let chks=tb.querySelectorAll("input[type='checkbox']")
	chks.forEach(function(item,index,array){
		if(item.checked && item.id ==''){
			let index=item.parentNode.parentNode.rowIndex;
			tb.deleteRow(index);
		}
		chk.checked=false;
	})
	
	
}




function selectAll(){

	let chk=document.querySelector('#chk');
	//找到表格中所有的复选框
	let tb=document.querySelector('#tb');
	let chks=tb.querySelectorAll("input[type='checkbox']")
	//需要遍历一个一个对比
	chks.forEach(function(item){
		item.checked = chk.checked;
	})
	
	
}





function update(){
	let uid=document.querySelector("#uid");
	let uname=document.querySelector('#uname');
	let umajor=document.querySelector("#umajor");
	//找到修改的行
	let tb=document.querySelector('#tb');
	let findTr=null;
	for (var i = 0; i < tb.rows.length; i++) {
		let tmpTr=tb.rows[i];
		let uidCell=tmpTr.cells[1];
		if(uid.value==uidCell.innerHTML){
			findTr= tmpTr;
			break;
		}
	}
	//找到以后就是修改
	if(findTr==null) return;
	findTr.cells[2].innerHTML=uname.value;
	findTr.cells[3].innerHTML=umajor.value;
	//清空
	uid.value=parseInt(uid.value)+1;
	uname.value='';
	umajor.value='';
	 document.querySelector('#btnUpdate').disabled=true;
}
function add(){
	let uid=document.querySelector("#uid");
	let uname=document.querySelector('#uname');
	let umajor=document.querySelector("#umajor");
	//找到table 标签
	let tb=document.querySelector("#tb");
	//添加一行
	let tr=tb.insertRow()
	//添加单元格
	let chk=tr.insertCell();
	chk.innerHTML ="<input type='checkbox'/>";
	let uidTd=tr.insertCell();
	uidTd.innerHTML =uid.value;
	let unameTd=tr.insertCell();
	unameTd.innerHTML =uname.value;
	let umajorTd=tr.insertCell();
	umajorTd.innerHTML =umajor.value;
	//增加可以编辑按钮
	let upTd=tr.insertCell();
	upTd.innerHTML= "<input type='button' value='可以编辑' />"
	let reTd=tr.insertCell();
	reTd.innerHTML="<input type='button' value='删除' />"
	
	//点击编辑按钮
	upTd.querySelector('input').addEventListener('click',function(){
		let parentTd=this.parentNode;
		uid.value=parentTd.parentElement.children[1].innerHTML;//获取父节点下子节点的值
		uname.value=parentTd.parentElement.children[2].innerHTML;
		umajor.value=parentTd.parentElement.children[3].innerHTML;
	    document.querySelector('#btnUpdate').disabled=false;
		
	})
	//点击删除按钮
	reTd.querySelector('input').addEventListener('click',function(){
		let parentTd =this.parentNode.parentElement;
		let index=parentTd.rowIndex;
		console.log(index)
		if(window.confirm('确认删除吗','确定删除')==false) return;
		document.querySelector('#tb').deleteRow(index);
		
	})

	//清空
	uid.value=parseInt(uid.value)+1;
	uname.value='';
	umajor.value='';
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格操作</title>
		<script src="js/tb.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<fieldset id='' style="border: 2px solid red;">
			<legend> 表格操作</legend>
			<p>
				<label for="uid">编号</label><input type="text" name="uid" id="uid" disabled="true" value="1" placeholder="学号"/>
			</p>
			<p>
				<label for="uname">姓名</label><input type="text" name="uname" id="uname" value="姓名默认" placeholder="姓名"/>
			</p>
			<p>
				<label for="umajor">专业</label><input type="text" name="umajor" id="umajor" value="专业默认" placeholder="专业"/>
			</p>
			<p>
				<input type="button" name="btnAdd"    id="btnAdd"    value="添加" />
				<input type="button" name="btnUpdate" id="btnUpdate" disabled="true" value="修改" />
				<input type="button" name="btnRemove" id="btnRemove" value="删除全部" />
				<input type="button" name="btnSearch" id="btnSearch" value="查找" />
				<input type="button" name="btnClean" id="btnClean" value="清空" />
			</p>
			
			<table id ='tb' border="" cellspacing="" cellpadding="">
				<tr>
					<td><input type="checkbox" id='chk' ></td>
					<td>编号</td>
					<td>姓名</td>
					<td>专业</td>
					<td>编辑</td>
					<td>删除</td>
				</tr>
			</table>
		</fieldset>
		
	</body>
</html>