Requirements:
(1) from top to bottom row, alternating two colors
(2) hover, the third row becomes the color
(3) when the line before the check box is selected, the fourth row becomes color, this mouse hover, no color
`` `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: by 150px;
height: 35px;
text-align = left: Center;
border: 1px Solid # EEA9B8;
}
< / style>
<Script type = "text / JavaScript" the src = "https://cdn.bootcss.com/jquery/1.9.0/jquery.js"> </ Script>
</ head>
<body>
<Table cellpadding = "0" cellspacing = "0" border = ". 1">
<thead>
<TR>
<TH> Select <INPUT type = "CheckBox" /> </ th>
<TH> header </ th >
<TH> header </ TH>
<TH> header </ TH>
<TH> header </ TH>
<TH> header </ TH>
</ TR>
</ thead>
<tbody>
<TR >
<TD> <INPUT type = "CheckBox" /> </ td>
<TD> What is body </ td>
<TD> What is body </ td>
<TD> What is body </ td>
<td> this is the body of the table </ td>
<td> this is the body of the table </ td>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> This is body </ td>
<td> This is the table body </ TD>
<td> This is the table body </ TD>
</ TR>
<TR>
<td> <INPUT type = "CheckBox" /> </ TD>
<td> This is body </ td>
<TD> What is body </ td>
<TD> What is body </ td>
<TD> What is body </ td>
<TD> What is body </ td>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> this is body </ TD>
<TD> this is the body of the table </ TD>
<TD> this is the body of the table </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
< td> this is the body of the table </ td>
<td> This is the table body </ TD>
</ TR>
<TR>
<td> <INPUT type = "CheckBox" /> </ TD>
<td> This is the table body </ TD>
<td> This is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
</ TR>
<TR>
<TD> < INPUT type = "CheckBox" /> </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> this is body </ TD>
<TD> this is the body of the table </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox "/> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> this is the body of the table </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> this is the table body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ td>
<TD> this is the body of the table </ td>
<td> This is the table body </ TD>
<td> This is the table body </ TD>
<td> This is the table body </ TD>
<td> This is the table body </ 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>
```
Second edition: more complex
requirements:
(1) change the background color to achieve interlace, low priority;
(2) hover change the background color, if (3) (4) after the operation, hover, is no longer color; if not (3) (4) operation hover the mouse is removed, then according to (1) restore the background color, the lower priority class;
click (3) per row becomes background color, font color, priority upper;
(4) change the background color and then check the box, a high priority;
```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> Select <INPUT type = "CheckBox" /> </ th>
<TH> header </ th>
<TH> header </ th>
<TH> header </ th >
<TH> header </ TH>
<TH> header </ TH>
</ TR>
</ thead>
<tbody>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
< td> this is the table body </ td>
<td> this is the table body </ td>
<td> this is the table body </ td>
<td> this is the table body </ td>
<td> <span> this is => before </ span> </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
< td> this is the body of the table </ td>
<td> <span> This is => before </ span> </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body < / TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> <span> this is => before </ span > </ td>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ td>
<TD> What is body </ td>
<TD> What is body </ td>
<td> this is the body of the table </ TD>
<td> this is the body of the table </ TD>
<td> <span> this is => before </ span> </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> This is the Table body </ td>
<TD> this is the body of the table </ td>
<td> <span> This is => before </ span> </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body < / TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> <span> this is => before </ span > </ td>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ td>
<TD> What is body </ td>
<TD> What is body </ td>
<td> this is the body of the table </ TD>
<td> this is the body of the table </ TD>
<td> <span> this is => before </ span> </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> This is the Table body </ td>
<TD> this is the body of the table </ td>
<td> <span> This is => before </ span> </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body < / TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> What is body </ TD>
<TD> <span> this is => before </ span > </ td>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ td>
<TD> What is body </ td>
<TD> What is body </ td>
<td> this is the body of the table </ TD>
<td> this is the body of the table </ TD>
<td> <span> this is => before </ span> </ TD>
</ TR>
<TR>
<TD> <INPUT type = "CheckBox" /> </ TD>
<TD> What is Body </ TD>
<TD> What is Body </ TD>
<TD> This is the Table body </ td>
<TD> this is the body of the table </ 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>
```