Jquery implements table style setting_jquery-JS Tutorial-php.cn

Jquery implements table style setting_jquery

WBOY

Release： 2016-05-16 16:17:45

Original

1217 people have browsed it

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">

headoneheadTwo
第一行111111111
第二行222222222
第三行333333333
第四行444444444

headoneheadTwo
第一行111111111
第二行222222222
第三行333333333
第四行444444444