js实现表格的动态操作

aqzengkuasheng

于 2022-02-16 20:12:05 发布

阅读量316

点赞数

分类专栏： js 文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/aqzengkuasheng/article/details/122971024

版权

js 专栏收录该内容

17 篇文章

订阅专栏

这是一个关于HTML和JavaScript实现的动态表格交互功能的示例。当鼠标移到表格单元格上时，该单元格会变色。同时，提供了全选、取消全选和删除选中行的功能。用户可以通过点击按钮一次性删除多个选中的表格行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.当光标移动到表格的某一个单元格的时候，表格会变色
2.一次选中删除表格，或者一个一个删除表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width: 60%;
			/* border: 1px solid red; */
			height: 300px;
			margin: 0 auto;
		}
		
		table{
			border :1px solid darkgoldenrod;
			width: 70%;
			height: 90%;
		}
		
		th{
			background-color: aqua;
		}
		td{
			background-color: rgba(200,243,151,0.3);
		}
		button{
			border: none;
			width:60px;
			height: 30px;
			border-radius:10% ;
		}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var table=document.getElementsByTagName("table")[0];
				// console.log(table);
				table.onmouseover=function(){
					var t=event.target;
					// console.log(event);
					console.log(t.nodeName)
					if(t.nodeName=="TD"){//这是实现动态选中
						t.parentNode.style="background-color: #B8860B";
					}
					// if(t.nodeName=="TD"){
					// 	t.parent.style="background-color: #B8860B;";
						
					// }
				}
				var table=document.getElementsByTagName("table")[0];//这是实现鼠标离开后选中效果就没了
				table.onmouseout=function(){//onmouseout的对象是要移出的对象
					var t=event.target;
					if(t.nodeName=="TD"){
						t.parentNode.style="";
					}
					
				}
				//实现全选和取消
				var selectAll=document.getElementById("selectAll");
				selectAll.onclick=function(){
					//1找到所有的复选框
					var cs=document.getElementsByTagName("input");
					//让他们全部选中
					for(i=0;i<cs.length;i++){
						cs[i].checked=true;
					}
				}
				//实现取消选中
				var cancelALl=document.getElementById("cancelALl");
				cancelALl.onclick=function(){
					//1找到所有的复选框
					var cs=document.getElementsByTagName("input");
					//让他们全部取消选中
					for(i=0;i<cs.length;i++){
						cs[i].checked=false;
					}
				}
				//实现删除
				document.getElementById("delete").onclick=function(){
					//先拿到所有的input元素，然后再一个一个判断是否被选中
					var deleteinputs=document.getElementsByTagName("input");
					for(i=0;i<deleteinputs.length;i++){
						if(deleteinputs[i].checked){
								var tr=deleteinputs[i].parentNode.parentNode;
								console.log(tr);
								tr.parentNode.removeChild(tr);
								i--;//这个很细节，每次删除完一个后deleteinputs会重新排序deleteinputs[0]还是会存在
								// console.log(deleteinputs[0]);
								
						}
					}
				}
		
			}
		</script>
	</head>
	<body>
		<div>
			<button id="selectAll">全选</button>
			<button id="cancelALl">取消</button>
			<button id="delete">删除</button>
			<table>
				<tr >
					<th>选择</th>
					<th>商品编号</th>
					<th>商品名称</th>
					<th>规格</th>
					<th>采购数量</th>
				</tr>
				<tr >
					<td><input type="checkbox" id="1"/></td>
					<td>0x001</td>
					<td>摄影机</td>
					<td>亮度约：2200流</td>
					<td>2</td>
				</tr>
				<tr>
					<td><input type="checkbox" id="2"/></td>
					<td>0x002</td>
					<td>摄影机</td>
					<td>亮度约：2200流</td>
					<td>2</td>
				</tr>
				<tr >
					<td><input type="checkbox" id="3"/></td>
					<td>0x003</td>
					<td>摄影机</td>
					<td>亮度约：2200流</td>
					<td>2</td>
				</tr>
				<tr>
					<td><input type="checkbox" id="4"/></td>
					<td>0x004</td>
					<td>摄影机</td>
					<td>亮度约：2200流</td>
					<td>2</td>
				</tr>
			</table>
		</div>

	</body>
</html>