Jquery implements table style setting_jquery

In the previous article, we used jquery to implement full selection of checkboxes. We got suggestions from some friends. I was really not sure about the definition of the plug-in, which made me laugh. Some friends suggested that I read "Sharp Jquery". To be honest, I was watching it. Since I am still studying, I want to write the jquery effects that are often used in projects into general methods. I can improve these methods with everyone's help, and also let people who don't know how to do it learn about a method, and finally form my own Jquery method. Library to facilitate future use. These examples are all written by myself without reference, so there are many areas that need improvement.

1: Why write this method

In the project, some tables must be styled. In order to make the styles beautiful, the table header has one style, the odd-numbered rows have one style, and the even-numbered rows have one style. The color changes when the mouse passes over it, and returns to color when the mouse leaves. This is how you do it.

2: Implementation process

js file xs_table_css.js

Copy code The code is as follows:

$(document).ready(function () {
var xs_table_css = "xs_table"; //Get table css
var xs_table_th_css = "xs_table_th"; //table's th style
var xs_table_even_css = "xs_table_even"; //Even numbered rows of table css
var xs_table_odd_css = "xs_table_odd"; //Odd rows of table css
var xs_table_select_css = "xs_table_select"; //table select row style
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"); //Even rows of data
         var tr_odd = $(this).children().children(":odd").has("td"); //Odd numbered rows of data
        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 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

Copy code The code is as follows:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

   
   
   
   

headone	headTwo
第一行	111111111
第二行	222222222
第三行	333333333
第四行	444444444

headone	headTwo
第一行	111111111
第二行	222222222
第三行	333333333
第四行	444444444

3：方法说明

  （1）mouseover和mouseout要先移除上次的css，不然会出现样式叠加

  （2）找tr时注意tbody,虽然页面上没有tbody标签，但是默认会有这个子元素

  （3）奇偶行要去除th，只找td的