表格 隔行换色升级版


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 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
封装 axios+promise通用请求函数操作
Aug 11 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
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
基于jquery的表格排序
2010/09/11 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python中new方法的详解
2019/01/15 Python
python try 异常处理(史上最全)
2019/03/07 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
python正则表达式实例代码
2020/03/03 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
民间个人借款协议书
2014/09/30 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python