利用 jQuery 选择器实现表格的全选,取消选择,单击更
改选中状态,反选等功能。如图所示。点击全选按钮,选中所有行,点击取
消按钮,所有行为未选中状态,单击反选按钮,则选中的行变成未选中的;
未选中的行变成选中的。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="1.css">
<script src="jquery-3.3.1.min.js"></script>
<script>
</script>
<script src="1.js"></script>
</head>
<body>
<button>全选</button>
<button>取消选中</button>
<button>反选</button>
<table border="1" width="800" height="100" cellspacing="0">
<tr class="head">
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr class="center">
<td>1</td>
<td>张1</td>
<td>男</td>
<td>11</td>
<td>重庆市</td>
</tr>
<tr class="center">
<td>2</td>
<td>张2</td>
<td>男</td>
<td>22</td>
<td>重庆市</td>
</tr>
<tr class="center">
<td>3</td>
<td>张3</td>
<td>男</td>
<td>33</td>
<td>重庆市</td>
</tr>
<tr class="center">
<td>4</td>
<td>张4</td>
<td>男</td>
<td>44</td>
<td>重庆市</td>
</tr>
<tr class="center">
<td>5</td>
<td>张5</td>
<td>男</td>
<td>55</td>
<td>重庆市</td>
</tr>
</table>
</body>
</html>
css代码
.head {
background-color: #898989;
text-align: center;
}
.selected{
background-color: pink;
}
js代码
$(document).ready(function() {
//全选
$("button:eq(0)").click(function () {
$("tr").addClass("selected")
.siblings(".head").removeClass("selected");
})
//取消全
$("button:eq(1)").click(function () {
$("tr").removeClass("selected")
// .siblings(".head").addClass("selected");
})
//点击
$(".center").click(function () {
$(this).addClass("selected")
.siblings().removeClass("selected");
})
//反
$("button:eq(2)").click(function () {
console.dir()
// .siblings(".head").addClass("selected");
$(".center").toggleClass("selected")
})
// $(".center").hover(
// function(){
// $(this).css("background","pink");
// },
// function(){
// $(this).css("background","");
// }
// )
})
注释掉的就是为表格添加光棒效果
自行更改