JavaScript简单实现全选和全不选功能

最新推荐文章于 2022-08-09 16:57:38 发布

像极了夏洛特

最新推荐文章于 2022-08-09 16:57:38 发布

阅读量773

点赞数 1

分类专栏： web基础文章标签：实现全选操作 JavaScript js 隔行换色高亮显示

本文链接：https://blog.csdn.net/d_bby/article/details/100143429

版权

web基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

JavaScript实现全选全不选功能，
其中使用的getElementsByTagName获取元素
根据标签名称获得多个元素：getElementsByTagName(标签名称)
实现代码：
注意：这里只是简单的实现了全选和全不选操作，并未实现其他功能。


    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//此处的thisEle用于接收全选框元素对象 (参数传递)
			function selectAll(thisEle){
				var inputs = document.getElementsByTagName("input");
				//遍历获取所有的子元素(子复选框)
				for (var i = 0; i < inputs.length; i++) {
					var elem = inputs[i];
					//每个子复选框checke属性值,保持和全选框checked属性值相同
					elem.checked = thisEle.checked;
				}
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td><input type="button" value="删除" /> </td>
				<td colspan="3"></td>
			</tr>
			<tr>
				//此处的this 代表的时全选框按钮
				<td><input type="checkbox" onclick="selectAll(this)"/></td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>操作</td>
			</tr>
			<tr>
				<td><input type="checkbox"/> </td>
				<td>1</td>
				<td>生活用品</td>
				<td><a href="#">修改</a><a href="#">删除</a> </td>
			</tr>
			<tr>
				<td><input type="checkbox"/> </td>
				<td>2</td>
				<td>食品百货</td>
				<td><a href="#">修改</a><a href="#">删除</a> </td>
			</tr>
			<tr>
				<td><input type="checkbox"/> </td>
				<td>3</td>
				<td>养生保健</td>
				<td><a href="#">修改</a><a href="#">删除</a> </td>
			</tr>
		</table>
	</body>
</html>

————————————2019年8月30日更新————————————————————
觉得只有这个太单调了，就在这里添加个隔行换色，然后鼠标选中时进行高亮(黄色)显示
js代码，如下：

//隔行换色
			window.onload = function(){
				var trs = document.getElementsByTagName("tr");
				for (var i = 2; i < trs.length; i++) {
				//为每行设置北京颜色，隔行换色
					if(i%2==0){
					trs[i].style.backgroundColor="skyblue";
					}else{
						trs[i].style.backgroundColor="antiquewhite";
					}
					//为每行添加鼠标进出得事件，实现鼠标选中时进行高亮显示，鼠标移开时恢复颜色
					var color;
					trs[i].onmouseover = function(){
					//记录当前行之前的背景色
						color = this.style.backgroundColor;
						this.style.backgroundColor = "yellow";
					}
					trs[i].onmouseout = function(){
					//鼠标移出时将当前行恢复颜色
						this.style.backgroundColor = color;
					}
				}
			}

隔行换色，高亮显示截图