Jquery 实现table样式的设定
上一篇我们使用jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看《锋利的Jquery》,说实话正在看了。由于正在学习中,我就想把项目中经常要用的jquery效果自己写成通用方法,可以在大家的帮助下完善这些方法,也可以让不会的了解到一种做法,最后形成自己的Jquery方法库,方便以后的使用,这些例子都是我自己写的,没有参考,所以有很多地方需要改进。
1:为什么要写这个方法
在项目中,一些table都要设置样式,为了样式的美观,表头是一个样式,奇数行一个样式,偶数行一个样式。当鼠标经过的时候颜色变化,鼠标离开时颜色恢复,这就有了这样方法。
2:实现过程
js文件xs_table_css.js
$(document).ready(function(){ varxs_table_css="xs_table";//获取table的css varxs_table_th_css="xs_table_th";//table的th样式 varxs_table_even_css="xs_table_even";//table的偶数行css varxs_table_odd_css="xs_table_odd";//table的奇数行css varxs_table_select_css="xs_table_select";//table选择行的样式 varxs_table="table."+xs_table_css; $(xs_table).each(function(){ $(this).children().children().has("th").addClass(xs_table_th_css);//表头 vartr_even=$(this).children().children(":even").has("td");//数据偶数行 vartr_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; }