jQuery处理表格：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery处理表格</title>
<link rel="stylesheet" href="../css/javascript.css"/>
<script type="text/javascript" src="../JS/jquery-3.5.1.js"></script>
<script type="text/javascript" src="../JS/jq_dealtab.js"></script>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td>姓名</td>
<td>班级</td>
<td>性别</td>
<td>
<input type="checkbox"/>全选
<button type="submit" disabled>删除</button>
</td>
</tr>
<tr>
<td>李黎</td>
<td>一班</td>
<td>男</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>李华</td>
<td>二班</td>
<td>男</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>李芳</td>
<td>三班</td>
<td>女</td>
<td><input type="checkbox"/></td>
</tr>
</table>
</body>
</html>
JavaScript部分：
"use strict";
window.onload = main;
function main() {
$("table input:checkbox:first").click(fun1);
$("table input:checkbox:gt(0)").click(fun2);
$("table tr:gt(0)").mouseover(fun3);
$("table tr:gt(0)").mouseout(fun4);
}
function fun1() {
var $obj1 = $(this).prop("checked");
var $obj2 = $("table input:checkbox:gt(0)").prop("checked",$obj1);
fun5();
}
function fun2() {
var $obj3 = $("table input:checkbox:gt(0)").length;
var $obj4 = $("table input:checkbox:gt(0):checked").length;
if($obj3==$obj4) {
$("table input:checkbox:first").prop("checked",true);
}else{
$("table input:checkbox:first").prop("checked",false);
}
fun5();
}
function fun3() {
$(this).css("background-color","#DCA7A7");
}
function fun4() {
$(this).css("background-color","#FFFFFF");
}
function fun5() {
var $obj4 = $("table input:checkbox:gt(0):checked").length;
if($obj4 > 0){
$("table button:submit").prop("disabled",false);
}else{
$("table button:submit").prop("disabled",true);
}
}
