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 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
大学毕业生通用自我评价
2014/01/05 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
支部组织生活会方案
2014/06/10 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
求职推荐信范文
2015/03/27 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript