表格常见事件练习-全选反选等

最新推荐文章于 2022-08-07 17:29:13 发布

Arvicky

最新推荐文章于 2022-08-07 17:29:13 发布

阅读量121

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/arvicky/article/details/119427316

版权

功能分析

在表中加入选择框并对选择框进行操作
1.全选：
*选择需要获取checkbox ；语法为checkboxObject.checked=true|false
2.全部取消勾选
3.反选勾选
以这张表为例，让第一列td都为checkbox

	<table border>
		<caption>学生信息表</caption>
		<tr>
			<th><input type="checkbox" name="cb" id="firstcb"></th>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>操作</th>
		</tr>
		<tr>
		<td><input type="checkbox"  name="cb"></td>
		<td>1</td>
		<td>王维</td>
		<td>男</td>
		<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
		</tr>
		
		<tr>
		<td><input type="checkbox"  name="cb"></td>
		<td>2</td>
		<td>李歌</td>
		<td>男</td>
		<td><a href="javascript:void(0)"; onclick="delTr(this);">删除</a></td>
		</tr>
		
		<tr>
		<td><input type="checkbox"  name="cb"></td>
		<td>3</td>
		<td>零栾</td>
		<td>女</td>
		<td><a href="javascript:void(0)"; onclick="delTr(this);">删除</a></td>
		</tr>
	</table>

效果是这样的
在这里插入图片描述
赋予所有checkbox标签一个name =cb
我们在script标签中获取这些name=cb的标签进行实践绑定
然后设置三个功能按键

<div> 
	<input type="button"  value="全选" id="selectAll">
	<input type="button" value="全部取消" id="cancleAll" >
	<input type="button" value="反选" id="selectRev" >
	</div>

下面对每个按键绑定对应的功能

<script>
		
		window.onload=function(){
		document.getElementById("selectAll").onclick=function(){
		//全选  
		//获取所有的checkbox
			var cbs = document.getElementsByName("cb"); 
			for ( var i = 0; i<cbs.length; i++){ 
				cbs[i].checked = true;
		}
		}
		document.getElementById("cancleAll").onclick=function(){
		//全选  
		//获取所有的checkbox
			var cbs = document.getElementsByName("cb"); 
			for ( var i = 0; i<cbs.length; i++){ 
			cbs[i].checked = false;
			}
		}
		//反选
		document.getElementById("selectRev").onclick=function(){
			var cbs = document.getElementsByName("cb"); 
			for ( var i = 0; i<cbs.length; i++){ 
			cbs[i].checked = !cbs[i].checked;
			}
		}
		</script>

反选时注意使用！对状态取反，因为checked状态值是true和false. 我试过使用if并没有生效可能我写的不对，我看视频学习时视频中指说不要用if并没有说原因。
上面三个按键就是单纯的实现字面功能，下面加一个首选框的功能
按下首行的选择框，其他所有选择框也跟着改变状态

	//首个选择框
			document.getElementById("firstcb").οnclick=function(){
			var cbs = document.getElementsByName("cb"); 
			for ( var i = 0; i<cbs.length; i++){ 
			cbs[i].checked =this.checked;
			}
		}

在这里插入图片描述
两种方式在代码中唯一的区别就是在给予所有选择框状态时的对象不同。上面的是通过this，这个this指代的事件就是firstcb对象，checked属性也是属于firstcb对象的，所以相当于所有框是根据第一个框状态来改变的。
而下面这个则是通过单击firstcb产生事件，遍历所有选择框并且改变状态，但是此时不会firstcb框和一个按键的表现相同，不会再被勾选，而是每点击一次其他选择框会改变状态。

for ( var i = 0; i<cbs.length; i++){ 
			cbs[i].checked =!cbs[i].checked;

在这里插入图片描述

给tr绑定鼠标移到事件和移出鼠标事件

涉及到一个小问题： getElementsByTagName和getElementsByName的区别；
常见的getElementById；id类似于身份证号，是唯一的，所以element也是单数，这个是不会重名的，所以只会绑定单个元素或目标。
TagName和Name的相同点：都可以绑定到多个元素，也就是控制多个信息。
区别在于Name 是我们可以在标签中自己写的，TagName 一般就是标签的名字，也就是TagName是用来控制同名标签使用。

我们首先绑定tr标签，使用鼠标的事件属性

		//给tr绑定鼠标移到事件和移出鼠标事件
		var trs = document.getElementsByTagName("tr");
		for(var i =0; i<trs.length;i++){
		tr[i].οnmοuseοver=function(){
			this.className="over";
		}
		
		
		tr[i].οnmοuseοut=function(){
		this.className="out";
		}

并且在style中设定对应的改变

<head>
<meta charset="UTF-8">
<title>表格选择效果</title>
<style>

 table {
 	border: 1px soild;  
 	margin:auto;
 	width: 500px;
 }
 	td,th{  
 	text-align :center;
 	margin:50px;
 	}
 	div{
 	 text-align:center;
 	 margin:50px;
 	}
	.out{
	background-color=white;
	}
	.over{
	background-color=pink;
	}
	
</style>
	
</head>

在这里插入图片描述
这是正常应当出现的效果，但是我的好像选择器写的哪里有点问题没有出现正常效果。

Arvicky

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格常见事件练习-全选反选等

功能分析在表中加入选择框并对选择框进行操作1.全选：*选择需要获取checkbox ；语法为checkboxObject.checked=true|false2.全部取消勾选3.反选勾选以这张表为例，让第一列td都为checkbox <table border> <caption>学生信息表</caption> <tr> <th><input type="checkbox" name="cb" id="firstc
复制链接

扫一扫