視頻看過以後自己總結做了一下，和原視頻的差不多，加入了鼠標滑過換色的效果，具體實現代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tbody > tr:odd").addClass("ou"); /*偶數行變色*/
$("tbody > tr:even").addClass("dan"); /*奇數行變色*/
$("tbody > tr:has(:checked)").addClass("ed"); /*默認選中行變色，可以不寫*/
/*選中行變色，並在複選框中打鉤*/
$("tbody > tr").click(function(){
var hased = $(this).hasClass("ed");
/*方法一：
if(hased){
$(this).removeClass("ed").find(":input").attr("checked",!hased); //這裏的!hased相當於false
}else{
$(this).addClass("ed").find(":input").attr("checked",!hased); //這裏的!hased相當於true
}*/
//方法二：方括號中爲三元運算
$(this)[hased?"removeClass":"addClass"]("ed").find(":input").attr("checked",!hased);
});
//鼠標滑過變色效果
$("tbody > tr").mouseover(function(){
$(this).addClass("over");
});
$("tbody > tr").mouseout(function(){
$(this).removeClass("over");
});
});
</script>
<style type="text/css">
table{
width:400px;
border:0;
border-collapse:collapse; /*邊框會合併爲一個單一的邊框*/
margin:auto;
}
th{
font:bold 18px "微軟雅黑";
text-align:center;
padding:4px;
border-bottom:1px solid #000;
}
td{
font:normal 18px "微軟雅黑";
text-align:center;
padding:2px;
border-bottom:1px solid #000;
}
.dan{
background:#F33;
color:#FFF;
}
.ou{
background:#F96;
}
.ed{
background:#639;
color:#FFF;
}
.over{
background:#6C3;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th><th>時間</th><th>地點</th><th>人物</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>5月01日</td><td>北京</td><td>小張</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>4月03日</td><td>上海</td><td>王洋</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>7月16日</td><td>天津</td><td>婉玉</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>3月22日</td><td>濟南</td><td>張協</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>6月08日</td><td>杭州</td><td>劉順</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>1月30日</td><td>哈爾濱</td><td>夏飛</td>
</tr>
</tbody>
</table>
</body>
</html>
鼠標點擊變色並勾選效果圖： 鼠標滑過變色效果圖：
