We used jquery to implement the checkbox selection, got some friends of the proposal, including the definition of plug-ins I really do not know, also made a joke, some friends suggested me to see "sharp jquery", to tell the truth is watching. As I'm learning, I want to write the jquery effect that I often use in my project as a common method, we can improve these methods with the help of everyone, also can let not understand a practice, and finally form their own jquery method library, easy to use later, these examples are written by myself, no reference, So there are many places to improve.
1: Why write this method
In the project, some tables have to be styled, for the sake of style, the header is a style, odd-numbered lines, one style, even-numbered lines. When the mouse passes through the color changes, the mouse left the color recovery, which has such a method.
2: The implementation process
JS file Xs_table_css.js
Copy Code code as follows:
$ (document). Ready (function () {
var xs_table_css = "Xs_table"; Get CSS for table
var xs_table_th_css = "xs_table_th"; Th style of table
var xs_table_even_css = "Xs_table_even"; Even-numbered rows of table CSS
var xs_table_odd_css = "Xs_table_odd"; Table's odd line of CSS
var xs_table_select_css = "Xs_table_select"; Table Select the style of the row
var xs_table = "table." + xs_table_css;
$ (xs_table). each (function () {
$ (this). Children (). Children (). has ("th"). addclass (XS_TABLE_TH_CSS); Table header
var Tr_even = $ (this). Children (). Children (": even"). Has ("TD"); Data even rows
var tr_odd = $ (this). Children (). Children (": odd"). Has ("TD"); Data odd rows
Tr_even.addclass (XS_TABLE_EVEN_CSS);
Tr_odd.addclass (XS_TABLE_ODD_CSS);
Tr_even.mouseover (function () {
$ (this). Removeclass (XS_TABLE_EVEN_CSS);
$ (this). addclass (XS_TABLE_SELECT_CSS);
});
Tr_even.mouseout (function () {
$ (this). Removeclass (XS_TABLE_SELECT_CSS);
$ (this). addclass (XS_TABLE_EVEN_CSS);
});
Tr_odd.mouseover (function () {
$ (this). Removeclass (XS_TABLE_ODD_CSS);
$ (this). addclass (XS_TABLE_SELECT_CSS);
});
Tr_odd.mouseout (function () {
$ (this). Removeclass (XS_TABLE_SELECT_CSS);
$ (this). addclass (XS_TABLE_ODD_CSS);
});
});
});
Style file Xs_table.css
Copy Code code as follows:
. xs_table
{
}
. xs_table_th
{
height:50px;
Background-color: #C0C0C0;
}
. Xs_table_even
{
height:50px;
Background-color: #F0F0F0;
}
. xs_table_odd
{
height:50px;
Background-color: #FFFFFF;
}
. xs_table_select
{
height:50px;
Background-color: #D9D9D9;
}
Paging File xs_table_css.htm
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= "Xs_table.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type= "Text/javascript" >
</script>
<script src= "Xs_table_css.js" type= "Text/javascript" ></script>
<body>
<table class= "xs_table" width= "800px" >
<tbody >
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td> First line </td><td>111111111</td></tr>
<tr><td> Second Line </td><td>222222222</td></tr>
<tr><td> Third line </td><td>333333333</td></tr>
<tr><td> Line Fourth </td><td>444444444</td></tr>
</tbody>
</table>
<br/>
<br/>
<table class= "xs_table" width= "800px" >
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td> First line </td><td>111111111</td></tr>
<tr><td> Second Line </td><td>222222222</td></tr>
<tr><td> Third line </td><td>333333333</td></tr>
<tr><td> Line Fourth </td><td>444444444</td></tr>
</table>
</body>
3: Method Description
(1) MouseOver and mouseout to first remove the last CSS, or there will be style overlay
(2) When looking for TR attention tbody, although there is no tbody label on the page, but the default will have this child element
(3) Odd even line to remove th, only to find TD's
