上一篇jquery實現checkbox的全選，得到了一些朋友的建議，其中插件的定義我的確不太清楚，也鬧了個笑話，有些朋友建議我去看《鋒利的Jquery》，說實話正在看了。由於正在學習中，我就想把項目中經常要用的jquery效果自己寫成通用方法，可以在大家的幫助下完善這些方法，也可以讓不會的了解到一種做法，最后
形成自己的Jquery 方法庫，方便以后的使用，這些例子都是我自己寫的，沒有參考，所以有很多地方需要改進。
1：為什么要寫這個方法
在項目中，一些table都要設置樣式，為了樣式的美觀，表頭是一個樣式，奇數行一個樣式，偶數行一個樣式。當鼠標經過的時候顏色變化，鼠標離開時顏色恢復,這就有了這樣方法。
2：實現過程
js文件xs_table_css.js
//**************************************************************************************** //作者：輕狂書生 //博客地址：http://www.cnblogs.com/xiaoshuai1992 //create: 2014/1/17 //功能：實現table顏色變化 //使用方法：引用jquery,設置table的樣式為變量xs_table_css的值 //***************************************************************************************** $(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的
4：下載地址：實現table樣式設定.zip
謝謝大家的指正，一起學習，一起進步了