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 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
Swiper.js实现移动端元素左右滑动
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写杨辉三角实例代码
2011/07/17 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python交易记录整合交易类详解
2019/07/03 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python接口测试get请求过程详解
2020/02/28 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
linux面试题参考答案(1)
2016/01/22 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
高中体育教学反思
2014/01/29 职场文书
标准毕业生自荐信
2014/06/24 职场文书
管理失职检讨书范文
2015/05/05 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
董事会决议范本
2015/07/01 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
利用Python实现模拟登录知乎
2022/05/25 Python