表格 隔行换色升级版


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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 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动态生成版权所有信息的方法
2015/03/24 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
几行js代码实现自适应
2017/02/24 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
kafka-python批量发送数据的实例
2018/12/27 Python
django query模块
2019/04/20 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
什么是python类属性
2020/06/10 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
linux面试题参考答案(5)
2014/09/01 面试题
绩效专员岗位职责
2013/12/02 职场文书
父亲节活动策划方案
2014/08/24 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers