表格 隔行换色升级版


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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
深入探讨前端框架react
Dec 09 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
几行js代码实现自适应
Feb 24 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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数组的维度
2013/06/10 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP创建XML接口示例
2019/07/04 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
node.js中的console用法总结
2014/12/15 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python绘制趋势图的示例
2020/09/17 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
个人承诺书格式
2014/06/03 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
先进工作者个人总结
2015/02/15 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL