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事件的一个常
随机推荐
- UTF8转成GB2312乱码问题解决方案
- js+html制作简单日历的方法
- java自定义日志输出文件(log4j日志文件输出多个自定义日志文件)
- ASP.NET中在一般处理程序中使用session的简单介绍
- C#通过yield实现数组全排列的方法
- Mysql varchar大小长度问题介绍
- php根据年月获取当月天数及日期数组的方法
- Python实现excel转sqlite的方法
- 3分钟掌握常用的JS操作JSON方法总结
- SQL Server存储过程同时返回分页结果集和总数
- php自定义函数实现二维数组排序功能
- 开发插件的两个方法jquery.fn.extend与jquery.extend
- Javascript排序算法之合并排序(归并排序)的2个例子
- 硬盘出现问题。以前客户的网站在D盘。如果换成其它好的盘上。如何处理?
- DNS查找, 域名, 和Cookies
- Java后台开发之表单提交之前验证
- Java中继承、多态、重载和重写介绍
- Android自定义View中Paint、Rect、Canvas介绍(一)
- 详解Java实现的k-means聚类算法
- Java线程池FutureTask实现原理详解