<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.over{
background-color:deeppink;
}
.out{
background-color:white;
}
</style>
<script>
/*功能分析:
* 1.三个按钮:全选 全不选 反选
* 2.第一个复选框:全选和全不选
* 3.鼠标移入变色,移出复原
* */
//窗口加载完毕事件
window.onload=function () {
/*按钮全选实现步骤:
* 1.获取“全选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中,获取所有的复选框元素
* 4.使用循环遍历,给所有复选框元素的checked属性赋值true
*/
document.getElementById("selectAll").onclick=function () {
var cbs=document.getElementsByName("cb");
cbs.forEach(function (e) {
e.checked=true;
})
}
/*按钮全不选实现步骤:
* 1.获取“全不选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中,获取所有的复选框元素
* 4.使用循环遍历,给所有复选框元素的checked属性赋值false
*/
document.getElementById("unSelectAll").onclick=function () {
var cbs=document.getElementsByName("cb");
cbs.forEach(function (e) {
e.checked=false;
})
}
/*按钮反选实现步骤:
* 1.获取“反选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中,获取所有的复选框元素
* 4.使用循环遍历,给所有复选框元素的checked属性 取非
*/
document.getElementById("selectRev").onclick=function () {
var cbs=document.getElementsByName("cb");
cbs.forEach(function (e) {
e.checked=!e.checked;
})
}
/*第一个复选框带动其它复选框全选和全不选实现步骤:
* 1.获取“第一个复选框”这个元素 firstCheckBox
* 2.给 firstCheckBox 绑定一个点击事件
* 3.在点击事件的实现中,获取所有的复选框元素
* 4.使用循环遍历,让所有复选框元素的checked属性 和 第一个复选框的 checked属性相同
*/
document.getElementById("firstCb").onclick=function () {
var cbs=document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked=this.checked;
}
}
/*鼠标移入移出变色功能实现步骤:
1.获取table中所有的tr元素
2.使用循环遍历给每一个tr元素绑定onmouseover和onmouseout事件
3.在style标签中事先写好.over和.out的背景颜色样式,分别是粉红色和白色
4.在鼠标移入和移出事件实现中,分别让tr元素的class值分别为over和out
*/
var trs=document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover=function () {
this.className="over";
}
trs[i].onmouseout=function () {
this.className="out";
}
}
/* 不可行 trs是nodeList类型,不是简单的数组 ,因此不能调用forEach函数
trs.forEach(function (tr) {
tr.οnmοuseοver=function () {
this.className="over";
}
tr.οnmοuseοut=function () {
this.className="out";
}
})*/
/*
非要用forEach ,可以使用call函数(看看即可)
Array.prototype.forEach.call(trs, function(tr) {
tr.οnmοuseοver=function () {
this.className="over";
}
tr.οnmοuseοut=function () {
this.className="out";
}
});*/
}
</script>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<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);">删除</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>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
Js实现表格全选,反选,全不选,第一个复选框全选或全不选,移入变色
最新推荐文章于 2024-03-01 09:01:11 发布