Although the jquery has been popular for many years, has been feeling very difficult, and did not spend time to learn it, but occasionally a whim to see a little bit, after a few days will forget completely. Recently used in the form of odd and even different colors, had to go to see jquery, although the feeling is still difficult, but has not been as hard as before. After you have to come to sigh about jquery is really awesome, do not have to write a lot of JavaScript functions to achieve, simple a few easy to handle.
First define the odd and even line style of the table, as follows:
Copy Code code as follows:
Body {
font-size:12px;
}
th {
Color: #FFFFFF;
Background: #A172AC;
}
table,table td,table th {
Padding:0.5em;
margin:0;
border:0;
border-spacing:0;
}
/* Odd Items 1,3,5,7,... * *
Table Tbody tr.odd,
. Odd {
Background: #FBD106;
}
/* Even items 2,4,6,8,... * *
Table Tbody Tr.even,
. even {
Background: #E6453B;
}
/* Hovered Items * *
. Odd:hover,
. Even:hover,
. hover {
Background: #4BB747;
Color: #FFFFFF;
}
And then the page code:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> using jquery to realize the different colors of table odd and even rows </title>
<link href= "Style/mysql.css" rel= "stylesheet"/>
<script src= "Javascript/jquery-1.7.2.min.js" ></script>
<script language= "javascript" type= "Text/javascript" >
$ (document). Ready (function () {
To exclude th label, TH may have its own peculiar style, so define th style.
$ ("Tr:not (: Has (TH)): Odd"). AddClass ("odd");
$ ("Tr:not (: Has (TH)): even"). AddClass ("even");
$ ("tr:odd"). AddClass ("odd");
$ ("Tr:even"). AddClass ("even");
If you do not define ". Odd:hover" and ". Even:hover" in CSS, you need Toggleclass ().
/*
$ ("tr"). MouseOver (function () {
$ (this). Toggleclass (". Hover");
});
$ ("tr"). Mouseout (function () {
$ (this). Toggleclass (". Hover");
});
*/
});
</script>
<body>
<div id= "Outline" >
<table>
<tr id= "TTH" >
<th>data</th>
<th>data</th>
<th>data</th>
<th>data</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</body>
If you do not need a mouse event, just the odd and even different colors can be directly used to do CSS.
Copy Code code as follows:
Table Tr:nth-child (even) TD,
Table Tr:nth-child (even) th {
Background-color: #FBD106;
}
Table Tr:nth-child (odd) TD,
Table Tr:nth-child (odd) th {
Background-color: #E6453B;
}
