html设置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);

});

});

});

样式文件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

headoneheadTwo
第一行111111111
第二行222222222
第三行333333333
第四行444444444
headoneheadTwo
第一行111111111
第二行222222222
第三行333333333
第四行444444444

3:方法说明

(1)mouseover和mouseout要先移除上次的css,不然会出现样式叠加

(2)找tr时注意tbody,虽然页面上没有tbody标签,但是默认会有这个子元素

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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值