（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格数据行全选/全不选/反选的示例</title><style>table {border: 1px solid;width: 500px;margin-left: 30%;}th, td {text-align: center;border: 1px solid;}div {/*border: 1px solid red;*/margin-top: 10px;margin-left: 30%;}.over {background-color: pink;}.out {background-color: white;}</style><script !src="">window.onload = function () {/*** 全选按钮* 给全选按钮注册点击事件监听器*/document.getElementById("selectAll").onclick = function () {// 获取所有的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {cbs[i].checked = true;}};/*** 控制第一个checkbox的状态* 规则：* 除了第一个checkbox的其它checkbox如果都是true，那么第一个checkbox则是true，否则是false*/function setFirstCbStatus() {// 获取第一个checkboxvar firstCb = document.getElementById("firstCb");// 获取全部的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {if (cbs[i].checked == false && cbs[i].id != "firstCb") {firstCb.checked = false;break;}// 判断是不是最后一次循环if (i == cbs.length - 1) {firstCb.checked = true;}}}/**** 反选功能的实现* 除了firstCb，其它checkbox反选*/document.getElementById("selectRev").onclick = function () {var cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {// 判断是不是firstCb，不是才需要反选if (cbs[i].id != "firstCb") {cbs[i].checked = !cbs[i].checked;}}// 设置firstCb的状态setFirstCbStatus();};/*** firstCb的点击功能* 点击firstCb时，如果firstCb选中，其它checkbox也选中，否则其它checkbox不选中*/document.getElementById("firstCb").onclick = function () {var cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {// 所有的checkbox的状态与firstCb的相同cbs[i].checked = this.checked;}};var cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {if (cbs[i].id != "firstCb") {cbs[i].onclick = setFirstCbStatus;}}/*** 全不选功能* 给全不选按钮注册点击事件监听器*/document.getElementById("unSelectAll").onclick = function () {// 获取所有的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {cbs[i].checked = false;}};/*** 给所有的tr注册鼠标指针移入事件监听器和鼠标指针移出事件监听器*/var trs = document.getElementsByTagName("tr");for (let i = 0; i < trs.length; i++) {// 注册鼠标移入事件监听器trs[i].onmouseover = function () {// 将事件源即tr对象的class属性值设为"over"this.className = "over";};// 注册鼠标移出事件监听器trs[i].onmouseout = function () {// 将事件源即tr对象的class属性值设为"out"this.className = "out";};}};</script>
</head>
<body>
<table><caption>学生信息表</caption><tr><th><input id="firstCb" type="checkbox" name="cb"></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);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>4</td><td>周芷若</td><td>女</td><td><a href="javascript:void(0);">删除</a></td></tr>
</table>
<div><input id="selectAll" type="button" value="全选"><input id="unSelectAll" type="button" value="全不选"><input id="selectRev" type="button" value="反选">
</div>
</body>
</html>

（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码相关推荐

前端开发流程中一定要注意的5个点
1. 拒绝PRD和设计稿没有封板就要求排期,和产品设计充分沟通. 前端开发经常会遇到这样的情况,项目经理莫名奇妙发了个会议邀请,然后一股脑把产品下阶段的需求讲完,开发听得云里雾里,心里吐槽一堆细节产品 ...
R语言dataframe计算满足筛选条件的行的个数（筛选满足条件的数据行并计数）：类似于excel的countif函数
R语言dataframe计算满足筛选条件的行的个数(筛选满足条件的数据行并计数):类似于excel的countif函数目录
R语言dplyr包移除dataframe数据行实战（Remove Rows）：按照条件移除数据行、按照索引移除数据行、删除包含NA值的所有数据行、删除具体列包含NA值的数据行
R语言dplyr包移除dataframe数据行实战(Remove Rows):按照条件移除数据行.按照索引移除数据行.删除包含NA值的所有数据行.删除具体列包含NA值的数据行目录
表格序号_让Excel表格中的序号自动更新，再也不怕删除、插入行了
以前小编发布过一篇<Excel自动生成序号的三种方法,省去一个一个录入的麻烦>,有粉丝问到:表格删除行或插入行后序号断了,能不能自动更新呢?今天小编就教大家自动更新序号的方法. 方法一:利 ...
广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
前端实现表格中的颜色变化以及不同点击效果
环境: Python flask框架下的 html页面目标: 1. 实现根据不同status显示不同颜色 2. 实现表格中对应链接根据不同状态不同点击效果效果: 不同任务状态不同颜色显示,不同重启 ...
Android中集成Jpush实现推送消息通知与根据别名指定推送附示例代码下载
场景经常会有后台服务向Android推送消息通知的情况. 实现首先在Android Studio中新建一个Android应用在Project根目录的build.gradle中配置了jcenter ...
oracle最快访问行,Oracle技术网—在Oracle快速进行数据行存在性检查
在Oracle快速进行数据行存在性检查当在应用程序的业务逻辑中需要检查一个外键是否有相关的主键时,往往使用Select Count(*)类型的SQL语句.这是一个很显而易的方法,但却不是最快的方法. ...
Ajax 实现在WebForm中拖动控件并即时在服务端保存状态数据 (Asp.net 2.0)(示例代码下载)...
(一) . 运行示例效果 * 运行后用鼠标拖动蓝色的<马>到任意位置, 将浏览器关闭后, 再重新访问本页面, 会发现<马>仍然在您拖到的位置 (二). AjaxPro.NET简 ...

（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码

（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码相关推荐

最新文章

热门文章