表格 隔行换色升级版


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 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
带你快速理解javascript中的事件模型
Aug 14 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JS二分查找算法详解
2017/11/01 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
Python算法之图的遍历
2017/11/16 Python
python ChainMap的使用和说明详解
2019/06/11 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
考核评语大全
2014/04/29 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript