Jquery 实现table样式的设定

这篇文章主要介绍了Jquery 实现table样式的设定方法的相关资料,需要的朋友可以参考下

上一篇我们使用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);
         });
     });
 });