table 隔列(行)换色效果让表格结构更清淅
table 隔列换色效果
#test{ background-color:#C96; text-align:center; line-height:2em;}
.over{background-color:#fff;}
.out{background-color:#F1F1F1;}
window.onload = function(){
//returnColor("test");
setColor("test");
}
function setColor(id)
{
var trs=document.getElementById(id).getElementsByTagName("tr");
for(var i=0; i
0 | 1 | 2 | 18 |
3 | 4 | 5 | 19 |
6 | 7 | 8 | 20 |
9 | 10 | 11 | 21 |
12 | 13 | 14 | 22 |
15 | 16 | 17 | 23 |
27 | 26 | 25 | 24 |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
table 隔列(行)换色效果让表格结构更清淅
table 隔列换色效果 #test{ background-color:#C96; text-align:center; line-height:2em;} .over{background-color:#fff;} .out{background-color:#F1F1F1;} window.onload = function(){ //returnColor("test"); setColor("test"); } function setColor(id)
-
jquery实现表格隔行换色效果
本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html: TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
jquery隔行换色效果实现方法
本文实例讲述了jquery隔行换色效果实现方法.分享给大家供大家参考.具体分析如下: 使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样.来吧,看看代码到底有多么的简单 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javasc
-
JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh
-
li隔行换色效果代码升级版
隔行换色 2 - www.jb51.net 0)?"t1":"t2"; } if(s=="no"){ return; } else if(!s){ for(var i=0;i 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 3 4 5 6 7 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
jQuery表格行换色的三种实现方法
复制代码 代码如下: $('tr').hover(function(event) { $(this)[ (event.type == 'mouseenter' ? 'add' : 'remove') + 'Class' ]('test'); //test是样式 }); $('tr').hover(function(event) { $(this).toggleClass('test'); //test是样式 }); $('tr').hover(function(){ $(this).addCla
-
实现隔行换色效果的两种方式【实用】
纯CSS方式实现隔行颜色交替.鼠标经过高亮颜色: <html> <head> <title></title> <style type="text/css"> ul{list-style:none} li:nth-child(odd){background-color:#eee} li:hover{background-color:Yellow} </style> </head> <body>
-
JS实现简洁(隔行换色、高亮显示)表格特效
JS实现的表格 document.write(' '); var i=0; while(i') } document.write(' '+i+' '); i++; //document.write(' '); } if(i%10==0){ document.write(' '); } document.write(' '); var ys=null; function show(obj){ ys=obj.bgColor; obj.bgColor="red"; } function no
-
CSS2实现的隔行换色
利用了CSS2 的 相邻选择符 IE7以下不支持 隔行换色示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>
-
使用jquery hover事件实现表格的隔行换色功能示例
jQuery hover事件 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常
随机推荐
- PJBLOG中用到的ajaxjs.几个简单的函数
- jQuery TextBox自动完成条
- dreamweaver cs4 改进了flash的链接代码
- javascript判断元素存在和判断元素存在于实时的dom中的方法
- pl/sql连接远程oracle服务器的配置教程
- 在aspx页面引用html页的写法
- ThinkPHP模板判断输出Defined标签用法详解
- jqGrid jQuery 表格插件测试代码
- 关于onchange事件在IE和FF下的表现及解决方法
- js实现点击按钮后给Div图层设置随机背景颜色的方法
- 解析在内部循环中Continue外部循环的使用详解
- C++中的按位与&、按位与或|、按位异或^运算符详解
- C#多线程之Thread中Thread.IsAlive属性用法分析
- Android开发自学笔记(六):声明权限和Activity
- 基于Python Numpy的数组array和矩阵matrix详解
- React Form组件的实现封装杂谈
- 详解application.properties和application.yml文件的区别
- this关键字详解
- docker registry私服搭建的方法
- PHP经典设计模式之依赖注入定义与用法详解