Jquery sets the table style, jquerytable
In the previous article, we used jquery to achieve full selection of checkbox and got some suggestions from friends. I do not know the plug-in definition clearly, and I also made a joke, some of my friends suggested that I go to "sharp Jquery". To tell the truth, I am reading it. As I am learning, I want to write the jquery effect that is frequently used in projects as a general method. With your help, I can improve these methods, it also makes it easier to understand a method, and finally forms its own Jquery plugin library for future use. These examples are self-written and have no reference, therefore, there are many areas to be improved.
1: Why write this method?
In the project, you must set styles for some tables. To make the style beautiful, the header is a style, with an odd number of rows and an even number of rows. The color changes when the mouse passes, and the color is restored when the mouse leaves.
2: Implementation Process
Js file xs_table_css.js
Copy codeThe Code is as follows:
$ (Document). ready (function (){
Var xs_table_css = "xs_table"; // obtain the css of the table.
Var xs_table_th_css = "xs_table_th"; // The th style of the table
Var xs_table_even_css = "xs_table_even"; // css with an even row of table
Var xs_table_odd_css = "xs_table_odd"; // the odd row css of table
Var xs_table_select_css = "xs_table_select"; // select the row style for the table.
Var xs_table = "table." + xs_table_css;
$ (Xs_table). each (function (){
$ (This). children (). children (). has ("th"). addClass (xs_table_th_css); // Header
Var tr_even = $ (this). children (). children (": even"). has ("td"); // an even row of data
Var tr_odd = $ (this). children (). children (": odd"). has ("td"); // odd data 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 );
});
});
});
Sample file xs_table.css
Copy codeThe Code is 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;
}
Page file xs_table_css.htm
Copy codeThe Code is as follows:
<! 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>
<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>
</Head>
<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> Row 2 </td> <td> 222222222 </td> </tr>
<Tr> <td> Row 3 </td> <td> 333333333 </td> </tr>
<Tr> <td> row 4 </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> Row 2 </td> <td> 222222222 </td> </tr>
<Tr> <td> Row 3 </td> <td> 333333333 </td> </tr>
<Tr> <td> row 4 </td> <td> 444444444 </td> </tr>
</Table>
</Body>
</Html>
3: Method description
(1) You need to remove the previous css before mouseover and mouseout. Otherwise, style overlay will appear.
(2) Pay attention to tbody when searching for tr. Although there is no tbody tag on the page, this child element is used by default.
(3) To remove th from the odd and even lines, only find