Jquery 实现table样式的设定


Posted in Javascript onJanuary 28, 2015

上一篇我们使用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的

Javascript 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
jquery实现拖动效果
Aug 10 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
Jquery 实现checkbox全选方法
Jan 28 #Javascript
AngularJS实现表单验证
Jan 28 #Javascript
jQuery制作简单柱状图实例
Jan 28 #Javascript
js分页工具实例
Jan 28 #Javascript
js制作简易年历完整实例
Jan 28 #Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 #Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python装饰器常见使用方法分析
2019/06/26 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
军训自我鉴定
2013/12/14 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
初中英语演讲稿
2014/04/29 职场文书
会计求职信范文
2014/05/24 职场文书
汽车广告策划方案
2014/05/31 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS