Jquery 實作table樣式的設定_jquery

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

1：為什麼要寫這個方法

在專案中，有些table都要設定樣式，為了樣式的美觀，表頭是一個樣式，奇數行一個樣式，偶數行一個樣式。當滑鼠經過的時候顏色變化，滑鼠離開時顏色恢復,這就有了這樣方法。

2：實現過程

js檔xs_table_css.js

複製程式碼 程式碼如下:

$(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的偶數行css
    var xs_table_odd_css = "xs_table_odd"; //table的奇數行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"); //資料偶數行
        var tr_odd = $(this).children().children(":odd").has("td"); //資料奇數行
        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);
        });
    });
});

樣式檔xs_table.css

複製程式碼 程式碼如下:

.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;
}

頁面檔案xs_table_css.htm

複製程式碼 程式碼如下:

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


<テーブルクラス="xs_table" width="800px">
<本体>
headoneheadTwo
gt;最初の行

二行目222222222
第三行333333333
第四行444444444






<テーブルクラス="xs_table" width="800px">
headone headTwo
gt;最初の行

二行目 222222222
第三行 333333333
第四行 444444444

3：方法说説明

（1）mouseoverとmouseout要先移除上次のcss、不会出现样式叠加

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

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