要求：
（1）行从上到下，两种颜色交替出现
（2）鼠标悬停时，行变为第三种颜色
（3）行前的复选框被选中时，行变为第四种颜色，鼠标在此悬停时，不再变色
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
table{margin:0 auto;}
table th{background: #D4D4D4;}
table th, table td {
width: 150px;
height:35px;
text-align: center;
border: 1px solid #EEA9B8;
}
</style>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>全选<input type="checkbox" /></th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
$(function () {
var $bodyTr=$("tbody tr");
var $headCheckbox = $("thead input[type=checkbox]");
var $bodyCheckbox = $("tbody input[type=checkbox]");
var $bodyCheckboxLength = $bodyCheckbox.length;
$headCheckbox.click(function () {
if($(this).is(":checked")){
$bodyCheckbox.prop("checked",true);
$bodyTr.css("background","#EED8AE");
}else{
$bodyCheckbox.prop("checked",false);
$bodyTr.each(function (index, item) {
if(index%2){
$(item).css("background","#F0F8FF");
item.index="#F0F8FF";
}else{
$(item).css("background","#EEEEE0");
item.index="#EEEEE0";
}
});
}
});
$bodyTr.each(function (index, item) {
if(index%2){
$(item).css("background","#F0F8FF");
item.index="#F0F8FF";
}else{
$(item).css("background","#EEEEE0");
item.index="#EEEEE0";
}
$(item).mouseover(function () {
if($(item).find("input").is(":checked")){
$(item).css("background","#EED8AE")
}else{
$(item).css("background","yellow")
}
});
$(item).mouseout(function () {
if($(item).find("input").is(":checked")){
$(item).css("background","#EED8AE")
}else{
$(item).css("background",item.index)
}
});
$(item).find("input").click(function () {
if($(this).is(":checked")){
$(item).css("background","#EED8AE");
var $bodySelected = $("tbody input:checked");
var $bodySelectedLength = $bodySelected.length;
if ($bodySelectedLength==$bodyCheckboxLength) {
$headCheckbox.prop("checked",true);
}
}else{
$(item).css("background",item.index);
$headCheckbox.prop("checked",false);
}
})
});
});
</script>
```
第二版：更复杂
需求：
（1）实现隔行变背景色，优先级低；
（2）鼠标悬停时变背景色，如果在（3）（4）操作后，鼠标悬停，则不再变色；如果不在（3）（4）操作后悬停，鼠标移走后，则根据（1）恢复背景色，优先级中下；
（3）每行点击后变背景色，字体变色，优先级中上；
（4）勾选复选框后再变背景色，优先级高；
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
table{margin:0 auto;}
table th{background: #D4D4D4;}
table th, table td {
width: 150px;
height:35px;
text-align: center;
border: 1px solid #EEA9B8;
}
/*table td span{
border:1px solid blue;
}*/
</style>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>全选<input type="checkbox" /></th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td>这是表体</td>
<td><span>这是=>详情</span></td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
$(function () {
var $bodyTr=$("tbody tr");
var $headCheckbox = $("thead input[type=checkbox]");
var $bodyCheckbox = $("tbody input[type=checkbox]");
var $bodyCheckboxLength = $bodyCheckbox.length;
$bodyTr.each(function (index, item) {
if(index%2){
$(item).css("background","#F0F8FF");
item.index="#F0F8FF";
item.read="no"
}else{
$(item).css("background","#EEEEE0");
item.index="#EEEEE0";
item.read="no"
}
$(item).mouseover(function () {
if($(item).find("input").is(":checked")){
$(item).css("background","#EED8AE")
}else{
if($(item).attr("read")==="yes"){
$(item).css("background","red");
}else{
$(item).css("background","yellow")
}
}
});
$(item).mouseout(function () {
if($(item).find("input").is(":checked")){
$(item).css("background","#EED8AE")
}else{
if($(item).attr("read")==="yes"){
console.log(11111);
$(item).css("background","red");
}else{
$(item).css("background",item.index);
console.log(22222);
}
}
});
$(item).find("input").click(function () {
if($(this).is(":checked")){
$(item).css("background","#EED8AE");
var $bodySelected = $("tbody input:checked");
var $bodySelectedLength = $bodySelected.length;
if ($bodySelectedLength==$bodyCheckboxLength) {
$headCheckbox.prop("checked",true);
}
}else{
if($(item).attr("read")==="yes"){
$(item).css("background","red");
}else{
$(item).css("background",item.index)
}
$headCheckbox.prop("checked",false);
}
});
$(item).click(function (event) {
var eventTargetTagName=event.target.tagName.toUpperCase();
if(eventTargetTagName!="INPUT"){
if($(item).find("input").is(":checked")){
$(item).attr("read","yes");
$(item).css("background","#EED8AE");
$(item).css("color","blue");
}else{
$(item).attr("read","yes");
$(item).css("background","red");
$(item).css("color","blue");
}
}
});
});
$headCheckbox.click(function () {
if($(this).is(":checked")){
$bodyCheckbox.prop("checked",true);
$bodyTr.css("background","#EED8AE");
}else{
$bodyCheckbox.prop("checked",false);
$bodyTr.each(function (index, item) {
if($(item).attr("read")==="yes"){
$(item).css("background","red");
}else{
if(index%2){
$(item).css("background","#F0F8FF");
item.index="#F0F8FF";
}else{
$(item).css("background","#EEEEE0");
item.index="#EEEEE0";
}
}
});
}
});
});
</script>
```