表格 隔行换色升级版


Posted in Javascript onNovember 07, 2009

昨天弄了个表格隔行换色,但是只是一张表里换
如果一个页面里出现多个表格需要怎么整
捣鼓出新的结果
如下:

function onloadEvent(func){ 
var one=window.onload 
if(typeof window.onload!='function'){ 
window.onload=func 
} 
else{ 
window.onload=function(){ 
one(); 
func(); 
} 
} 
} 
function showtable(tableid){ 
var overcolor='#FCF9D8'; 
var color1='#FFFFFF'; 
var color2='#F8F8F8'; 
var tablename=document.getElementById(tableid) 
var tr=tablename.getElementsByTagName("tr") 
for(var i=0 ;i<tr.length;i++){ 
tr[i].onmouseover=function(){ 
this.style.backgroundColor=overcolor; 
} 
tr[i].onmouseout=function(){ 
if(this.rowIndex%2==0){ 
this.style.backgroundColor=color1; 
}else{ 
this.style.backgroundColor=color2; 
} 
} 
if(i%2==0){ 
tr[i].className="color1"; 
}else{ 
tr[i].className="color2"; 
} 
} 
} 
onloadEvent(function init(){ 
showtable('table'); 
showtable('test'); 
} 
);

这样在html里增加表格的时候加上ID就OK了,一个多次调用的表格隔行换色完毕
牛逼的人生不需要解释
Javascript 相关文章推荐
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
jquery操作select大全
Apr 25 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
csdn 论坛技术区平均给分功能
Nov 07 #Javascript
在js中单选框和复选框获取值的方式
Nov 06 #Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 #Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 #Javascript
jQuery toggle()设置CSS样式
Nov 05 #Javascript
javascript 打印内容方法小结
Nov 04 #Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 #Javascript
You might like
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP比你想象的好得多
2014/11/27 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
Django返回json数据用法示例
2016/09/18 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
pandas string转dataframe的方法
2018/04/11 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
露营世界:Camping World
2017/02/02 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
一套SQL笔试题
2016/08/14 面试题
红旗团支部事迹材料
2014/01/27 职场文书
学习两会精神心得范文
2014/03/17 职场文书
公司证明怎么写
2014/09/22 职场文书
2014年科室工作总结
2014/11/20 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js