<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 700px;
height: auto;
font-family: "黑体";
font-size: 20px;
text-align: center;
}
.tr_first{
background-color: deepskyblue;
color: white;
font-weight: bold;
}
.tr_odd{
background-color: antiquewhite;
}
.tr_over{
background-color: pink;
cursor: pointer;
}
</style>
//必须插入"jQuery-3.3.1.js文件"
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//动态添加class样式
$("tr:first").addClass("tr_first");
//给单数表格添加颜色
$("tr:odd").addClass("tr_odd");
//触碰变色
$("tr:not(:eq(0))").mouseover(function(){
$(this).addClass("tr_over");
})
//离开复原
$("tr:not(:eq(0))").mouseout(function(){
$(this).removeClass("tr_over");
})
//全选全不选
$("#tr_id").click(function(){
$(".tr_class").prop("checked",this.checked);
});
//将批量按钮绑定事件
$("#but").click(function(){
//获取被选中复选框的value值
$("[class='tr_class']:checked").each(function(){
var $val = $(this).val();
alert($val);
});
});
});
</script>
</head>
<body>
<center>
<table border="1px" cellspacing="0" cellpadding="6px">
<tr>
<td>
<input type="checkbox" id="tr_id" />
</td>
<td>姓名</td>
<td>年龄</td>
<td>出生时期</td>
<td>爱好</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tr_class" value="1" />
</td>
<td>西施</td>
<td>18</td>
<td>战国时期</td>
<td>范蠡</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tr_class" value="2" />
</td>
<td>王昭君</td>
<td>19</td>
<td>西汉</td>
<td>和平</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tr_class" value="3" />
</td>
<td>貂蝉</td>
<td>17</td>
<td>三国</td>
<td>吕布</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tr_class" value="4" />
</td>
<td>杨玉环</td>
<td>16</td>
<td>大唐</td>
<td>跳舞</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tr_class" value="5" />
</td>
<td>甄宓</td>
<td>20</td>
<td>三国</td>
<td>哭</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tr_class" value="6" />
</td>
<td>曹节</td>
<td>19</td>
<td>三国</td>
<td>刘平</td>
</tr>
</table>
<button id="but">批量管理</button>
</center>
</body>
</html>