快捷導(dǎo)航

Jquery 實(shí)現(xiàn)table樣式的設(shè)定

更新時(shí)間：2015年01月28日 10:41:56 投稿：hebedich

這篇文章主要介紹了Jquery 實(shí)現(xiàn)table樣式的設(shè)定方法的相關(guān)資料,需要的朋友可以參考下

上一篇我們使用jquery實(shí)現(xiàn)checkbox的全選，得到了一些朋友的建議，其中插件的定義我的確不太清楚，也鬧了個(gè)笑話，有些朋友建議我去看《鋒利的Jquery》，說實(shí)話正在看了。由于正在學(xué)習(xí)中，我就想把項(xiàng)目中經(jīng)常要用的jquery效果自己寫成通用方法，可以在大家的幫助下完善這些方法，也可以讓不會(huì)的了解到一種做法，最后形成自己的Jquery 方法庫，方便以后的使用，這些例子都是我自己寫的，沒有參考，所以有很多地方需要改進(jìn)。

1：為什么要寫這個(gè)方法

在項(xiàng)目中，一些table都要設(shè)置樣式，為了樣式的美觀，表頭是一個(gè)樣式，奇數(shù)行一個(gè)樣式，偶數(shù)行一個(gè)樣式。當(dāng)鼠標(biāo)經(jīng)過的時(shí)候顏色變化，鼠標(biāo)離開時(shí)顏色恢復(fù),這就有了這樣方法。

2：實(shí)現(xiàn)過程

js文件xs_table_css.js

復(fù)制代碼代碼如下:

$(document).ready(function () {

    var xs_table_css = "xs_table"; //獲取table的css

    var xs_table_th_css = "xs_table_th"; //table 的th樣式

    var xs_table_even_css = "xs_table_even"; //table的偶數(shù)行css

    var xs_table_odd_css = "xs_table_odd"; //table的奇數(shù)行css

    var xs_table_select_css = "xs_table_select"; //table選擇行的樣式

    var xs_table = "table." + xs_table_css;

    $(xs_table).each(function () {

        $(this).children().children().has("th").addClass(xs_table_th_css); //表頭

        var tr_even = $(this).children().children(":even").has("td"); //數(shù)據(jù)偶數(shù)行

        var tr_odd = $(this).children().children(":odd").has("td"); //數(shù)據(jù)奇數(shù)行

        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);

        });

    });

});