`
DJ阿布
  • 浏览: 30061 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

表格间隔换色js

阅读更多

玩法:给table加一个DataTable的class。

 

第一版

 

$(document).ready(function () {
    //间隔换色
    $("table.DataTable").each(function () {
        $(this).bind("stripe", function () {
            $("tbody tr", this).each(function (index) {
                if ($("th", this).length) {
                    $(this).addClass("subhead");
                }
                else {
                    $(".DataTable tr:even").not("tr:first").addClass("even");
                    $(".DataTable tr:odd").addClass("odd");
                }
            });
        });
        $(this).trigger("stripe");
    });
});

 

升级版

 

$(document).ready(function () {
    //间隔换色
    $(".DataTable tbody tr:has(th)").addClass("subhead");
    $(".DataTable tr:even").not("tr:first").addClass("even");
    $(".DataTable tr:odd").addClass("odd");
});

分享到:
评论

相关推荐

    javascript实现table表格隔行变色的方法

    本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

    javascript简单实现表格行间隔显示颜色并高亮显示

    表格行间隔显示颜色并实现高亮显示,这种效果大家都有见到过吧,下面就为大家详细介绍下,需要的朋友可不要错过

    Javascript表格高级操作

    1.动态创建表格 2.兼容IE和FireFox 3.具有间隔色 4.具有鼠标进过高亮显示功能 5.具有编辑和删除功能,每行附带有编辑和删除按钮 6.具有全选,全清和反选功能

    Javascript高级表格操作

    1.动态创建表格 2.表格具有间隔行颜色 3.具有鼠标进过高亮显示 4.可以进行编辑和删除 5.可以全选,全清,反选 6.编辑时可以显示下拉框,单选框和复选框

    IE8 chrome中table隔行换色解决办法

    今天把项目生成好后,发布到万维网上进行测试,发现table的隔行换色在IE8,chorem中不能正常显示。找了许多资料,CSS看样是不能解决,只能用JS来控制了

    javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法

    主要介绍了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法,涉及javascript表格操作及按钮实现表格切换的技巧,需要的朋友可以参考下

    javascript完全学习手册1 源码

    8.5.5 更改表格间隔背景色 219 第9章 JavaScript中的XML 223 9.1 XML语言 223 9.1.1 XML概述 223 9.1.2 XML文档结构 225 9.1.3 XML标记 226 9.1.4 XML文档元素 226 9.1.5 XML属性 229 9.1.6 XML命名空间 230 9.2 XML...

    编辑表格甘特图.rar

    根据项目需要,最近编写的基于Jquery-UI的甘特图表和编辑表格插件,可根据项目选项,自动生成甘特图表,最小安排时间以10分钟为间隔,并可通过拖动安排进度条进行时间调整,每一行进度条可有多种状态,操作方便灵活...

    JavaScript网页特效范例宝典源码

    实例121 返回两个日期之间的间隔小时 188 实例122 倒计时 190 实例123 访问时间限制 191 实例124 计步器 192 4.3 日期时间特效 194 实例125 分时问候 194 实例126 节日提示 195 实例127 倒影时钟 196 实例128 带阴影...

    js处理表格对table进行修饰

    js处理表格 1、行颜色间隔显示 css样式:两个选择器 代码如下: <style type=”text/css”> .one{ background-color:#33ffcc; } .two{ backgound-color:#ffff66; } </style> [removed] function trcolor...

    javascript完全学习手册2 源码

    8.5.5 更改表格间隔背景色 第9章 JavaScript中的XML 9.1 XML语言 9.1.1 XML概述 9.1.2 XML文档结构 9.1.3 XML标记 9.1.4 XML文档元素 9.1.5 XML属性 9.1.6 XML命名空间 9.2 XMLDOM 9.2.1 通用...

    javascript函数的解释

    83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]); 85.JS中的退出之前使用...

    repeating-google-tasks:一个谷歌脚本,用于将完成的任务记录到电子表格中,并以定义的时间间隔重复标记的任务

    )设置为按时间间隔运行,它将轮询 Google 任务中的特定任务列表。 每当任务完成(但未清除)时,脚本都会将该任务记录到您的 Google Drive 帐户中的电子表格中(然后从任务列表中清除它们)。 我在设置了一个示例...

    JavaScript王者归来part.1 总数2

     13.6.4 标记行--呈现有别于其他行的背景色   13.6.5 小技巧--将代码添加到样式表   13.7 总结   第14章 级联样式表  14.1 什么是级联样式表   14.1.1 CSS样式和样式表   14.1.2 CSS的标准化   14.1.3...

    Hackerati-fullstack-project:使用套接字使用节点构建的间隔 Web 应用程序

    --Interval Web App--...技术: 运行时环境:NodeJS 语言:JavaScript 框架:Express.js 数据库:Mongodb ODM:猫鼬样式:CSS 模板引擎:ejs(嵌入式javascript) 库:jQuery、Socket.io、Chart.js、Twitter Bootstrap

    JS组件Bootstrap Table使用方法详解

    striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sort...

    JavaScript笔记

    JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是...

    js实现文字跑马灯效果

    本文主要介绍了js实现文字超过显示宽度每间隔1s自动向左滚动显示的跑马灯效果,具有很好的参考价值,下面跟着小编一起来看下吧

Global site tag (gtag.js) - Google Analytics