IE8 chrome中table隔行换色解决办法
IE8以上的版本代码,只需要CSS即可
tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); }
IE8以下的版本代码,是需要CSS与JS共同完成的:
首先定义好两个CSS,代码如下:
代码如下:
.tr1{background-color:#fff;}
.tr2{background-color:#00ff;}
onload=function(){
var trs=document.getElementById("tbid").getElementsByTagName("tr");//获取tbid的table中所有tr的信息
for(var i=0;i<trs.length;i++)
{
if(i%2==0)
trs[i].className="tr1";
else
trs[i].className="tr2";
}
}
作者:chenhuzi
相关推荐
-
li隔行换色改进版
ghhs("nav01","li"); // 鼠标经过时变色 ghhs("nav02","li","no"); // 只隔行换色 ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色 隔行换色 - www.jb51.net 我们 // 返回Id.Tag function Pid(id,tag){ if(!tag
-
不用javascript实现带序号的表格隔行换色的效果
.test{ border:1px solid #000; color:#333; font:12px; } .test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe'); } 观自在菩萨 行深般若波罗密多时 照见五蕴皆空 度一切苦厄 舍利子 色不异空 空不异色 色既是空 空既是色 受想行识 亦复如是 舍利子 是诸法空相 不生不灭 不垢不净 不增不减 是故空中
-
Js 实现表格隔行换色一例
Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:
-
表格隔行换色 css expression
第一行为其它颜色,这样写这个表达式 表格CSS测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试
-
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需刷新才能执行]
-
表格 隔行换色升级版
昨天弄了个表格隔行换色,但是只是一张表里换 如果一个页面里出现多个表格需要怎么整 捣鼓出新的结果 如下: 复制代码 代码如下: function onloadEvent(func){ var one=window.onload if(typeof window.onload!='function'){ window.onload=func } else{ window.onload=function(){ one(); func(); } } } function showtable(table
-
css expression 隔行换色
css实现的,用expression但在实际中部建议使用,占用资源而且firefox浏览器不支持 .db tr{ background-color:expression('#000000,#333333,#555555,#777777,#999999,#bbbbbb,#dddddd,#ffffff'.split(',')[rowIndex%8]); } [Ctrl+A 全选 注:如
-
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 隔行换色 支持键盘上下键,按Enter选定值
复制代码 代码如下: <!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> <meta http-equiv=&qu
-
IE8 chrome中table隔行换色解决办法
IE8以上的版本代码,只需要CSS即可 tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); } IE8以下的版本代码,是需要CSS与JS共同完成的: 首先定义好两个CSS,代码如下: 复制代码 代码如下: .tr1{background-color:#fff;} .tr2{background-color:#00ff;} 其实写JS代码,代码如下: 复制代码 代码如下: onload=functio
-
jQuery实现table隔行换色和鼠标经过变色的两种方法
一.隔行换色 复制代码 代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码 代码如下: $("table tr:nth-child(odd)").css("background-col
-
jQuery方法简洁实现隔行换色及toggleClass的使用
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&quo
-
使用简洁的jQuery方法实现隔行换色功能
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&
-
基于Jquery的表格隔行换色,移动换色,点击换色插件
效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt
-
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方法toggleClass实现隔行换色
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type="text/css&
-
jQuery实现表格隔行换色
本文实例为大家分享了jQuery实现表格隔行换色的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用JQ完成表格隔行换色</title> <script src="js/jquery.min.js"></script> <script> $(funct
-
基于JavaScript实现表格隔行换色
表格隔行换色 需求分析 我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色 技术分析 table对象 集合 cells[]:返回包含表格中所有单元格的一个数组. rows[]:返回包含表格中所有行的一个数组. tBodies[]:返回包含表格中所有tbody 的一个数组. 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改
-
使用JQ完成表格隔行换色的简单实例
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色. 2.具体代码实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色&
随机推荐
- 记一次mariadb数据库无法连接
- windows7 安装iis7.0图文教程(不需要单独的安装包)
- iOS仿热门话题热点轮播界面tableView
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)
- 基于js 本地存储(详解)
- 深入PHP5中的魔术方法详解
- thinkPHP订单数字提醒功能的实现方法
- 老生常谈ThinkPHP中的行为扩展和插件(推荐)
- Go语言声明一个多行字符串的变量
- C# 连接SQL数据库的方法及常用连接字符串
- C/C++ 公有继承、保护继承和私有继承的对比详解
- 解析Android获取系统cpu信息,内存,版本,电量等信息的方法详解
- javascript实现input file上传图片预览效果
- Bash Shell脚本学习小结
- 浅谈jquery选择器 :first与:first-child的区别
- ASP木马后门新思路
- php简单实现文件或图片强制下载的方法
- 获取MySQL的表中每个userid最后一条记录的方法
- PHP重置数组为连续数字索引的几种方式总结
- python中使用psutil查看内存占用的情况