Set table Styles using Jquery _ jquery

This article mainly introduces information about Jquery's method for setting table Styles. For more information, see the previous article. We used jquery to select all checkboxes and got some suggestions from some friends, I am not quite clear about the plug-in definition, and I have also made a joke. Some 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

The 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

The 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

The Code is as follows: