Javascript 单选全选单行删除添加功能的实现

最新推荐文章于 2024-05-30 15:07:12 发布

一只在上学的小程序猿

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量256

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_47834105/article/details/123689046

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<div class="center">
			<button id="but1">删除</button>
		<table id="table1" class='gridtable'>
			<thead>
				<tr>
					<th><input type="checkbox" id="allCheck"/></th>
					<th>标签名称</th>
					<th>功能</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" id="1"/></td>
					<td>head</td>
					<td>表示头部元素</td>
					<td>
						<a href="deleteEmp?id=001">删除</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" id="2"/></td>
					<td>body</td>
					<td>表示主要内容元素</td>
					<td>
						<a href="deleteEmp?id=001">删除</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" id="3"/></td>
					<td>p</td>
					<td>表示段落</td>
					<td>
						<a href="deleteEmp?id=001">删除</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" id="4"/></td>
					<td>div</td>
					<td>块元素</td>
					<td >
						<a href="deleteEmp?id=001">删除</a>
					</td>
				</tr>			
			</tbody>
		</table>
		<br />
			</div>
			
			<div class="center">
				<table id="table2" class="gridtable">
					<tr>
						<td>名称</td>
					</tr>
					<tr>
						<td class="inp">
							<input type="text" id="name" />
						</td>
					</tr>
					<tr>
						<td>功能</td>
					</tr>
					<tr>
						<td class="inp">
							<input type="text" id="func"/>
						</td>
					</tr>
					<tr>
						<td>
							<button id="addEmpButton" value="abc">提交</button>
						</td>
					</tr>
				</table>
			</div>
	</body>
	
	<script type="text/javascript">
		(()=>{
			/*
			1.鼠标掠过变色
		
			*/
		   let table1 = document.getElementById('table1');//获得要操作的表格
		   let tbody = table1.tBodies;//获得这个表格下的所有tbody
		   let trs=tbody[0].children;//获得第一个tbody的子标签
		   for(let i=0;i<trs.length;i++){
		   			   trs[i].addEventListener('mouseover',function(e){
		   				  trs[i].style.background='lightgray';
		   				   e.stopPropagation();
		   			   });
		   			   trs[i].addEventListener('mouseout',function(e){
		   			   				  trs[i].style.background='white';
		   			   				   e.stopPropagation();
		   			   });
		   }
		   
		   
		   let allCheck = document.getElementById('allCheck');
		   //所有checkbox，除了allcheck
		   let checks=[];
		   //所有的被选中的checkbox的id的值
		   let checkedIds = [];
		   //获取所有输入框
		   let inputs = document.getElementsByTagName('input');
		   
		   //过滤输入框，只添加checkbox
		   for(let i=0;i<inputs.length;i++){
			   if(inputs[i].type=='checkbox'&&inputs[i].id!='allCheck'){
				   checks.push(inputs[i]);
			   }
		   }		   
			/*
					2.全选checkbox（样式上的全选/内容上的全选）
			*/
			allCheck.addEventListener('click',function(e){
				//清空所选的id
				checkedIds=[];
				if(allCheck.checked){//全选被点击
					//全选
					for(let i in checks){
						checks[i].checked='checked';
						checkedIds.push(checks[i].id);
					}
					
				}else{
					//全不选
					for(let i in checks){
						checks[i].checked='';
					}
					checkedIds=[];
				}
				console.log(checkedIds);
			});
			
			/*
				任意选择
			*/
		   for(let i in checks){
			   checks[i].addEventListener('click',function(e){
				   if(checks[i].checked){//选上
					   checkedIds.push(checks[i].id);
				   }else{//取消选择
					   //去掉全选状态
					   allCheck.checked='';
					   for(let j in checkedIds){
						   if(checks[i].id==checkedIds[j]){
							   checkedIds.splice(j,1);
						   }
					   }
					   
				   }
				   console.log(checkedIds);
				   
			   });
		   }
		   //单行删除
		   function delA(){
		   				  let tr=this.parentNode.parentNode;				  
		   				  let con=confirm("确认删除吗")
		   				  if(con==true){
		   					  tr.parentNode.removeChild(tr);
		   				  }				  
		   				  return false;
		   }
		   let allA=document.getElementsByTagName("a");
		   for(let i=0;i<allA.length;i++){
			   allA[i].onclick=delA;
		   }
		   
		   //添加
		   let addEmpButton=document.getElementById("addEmpButton");
		   addEmpButton.onclick=function()
		   {
			   let name=document.getElementById("name").value;
			   let func=document.getElementById("func").value;
			   
			   let tr=document.createElement("tr");
			   
			   let inbox=document.createElement("input")
			   inbox.setAttribute("type","checkbox");
			   
			   let boxTd=document.createElement("td")
			   boxTd.appendChild(inbox);
			   
			   let nameTd=document.createElement("td");
			   let fuTd=document.createElement("td");
			   let aTd=document.createElement("td");
			   
			   let a=document.createElement("a");
			   
			   
			   let nameText=document.createTextNode(name);
			   let funcText=document.createTextNode(func);
			   let delText=document.createTextNode("删除");
			   
			   nameTd.appendChild(nameText);
			   fuTd.appendChild(funcText);
			   
			   a.appendChild(delText);
			   aTd.appendChild(a);
			   
			   tr.appendChild(boxTd);
			   tr.appendChild(nameTd);
			   tr.appendChild(fuTd);
			   tr.appendChild(aTd);
			   
			   a.href="deleteEmp?id=001"
			   
			   //再次绑定
			   a.onclick=delA;	   
			   let table1=document.getElementById("table1");
			   
			   let tbody=table1.getElementsByTagName("tbody")[0];
			   
			   tbody.appendChild(tr);
			  
			   // alert(name);
			   // alert(func);
		   }
		})()
	
	</script>

一只在上学的小程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript 单选全选单行删除添加功能的实现

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="center"> <button id="but1">删除&l.
复制链接

扫一扫