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打印网页部分内容的脚本
Nov 17 Javascript
关于this和self的使用说明
Aug 01 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
js表单登陆验证示例
Oct 19 Javascript
JavaScript实现星级评分
Jan 12 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
深入理解Python中变量赋值的问题
2017/01/12 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python 移动光标位置的方法
2019/01/20 Python
利用python开发app实战的方法
2019/07/09 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
大学生最新职业生涯规划书范文
2014/01/12 职场文书
发展部经理职责规定
2014/02/22 职场文书
大学校务公开实施方案
2014/03/31 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
总经理人事任命书
2014/06/05 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android