表格 隔行换色升级版


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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
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
ADODB类使用
2006/11/25 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
超清晰的document对象详解
2007/02/27 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jquery禁用右键示例
2014/04/28 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
小学一年级评语大全
2014/04/22 职场文书
验房委托书
2014/08/30 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android