DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery 實現table樣式的設定
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

代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="xs_table.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    </script>
    <script src="xs_table_css.js" type="text/javascript"></script>
</head>
<body>
<table class="xs_table" width="800px">
<tbody >
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</tbody>
</table>
<br />
<br />
<table class="xs_table" width="800px">
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</table>
</body>
</html>

3:方法說明

  (1)mouseover和mouseout要先移除上次的css,不然會出現樣式疊加

  (2)找tr時注意tbody,雖然頁面上沒有tbody標簽,但是默認會有這個子元素

  (3)奇偶行要去除th,只找td的

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved