表格 隔行换色升级版


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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
微信小程序自定义联系人弹窗
May 26 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中截取字符串支持utf-8
2007/01/18 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
php array的学习笔记
2012/05/10 PHP
php长字符串定义方法
2012/07/12 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Python学习之Django的管理界面代码示例
2018/02/10 Python
关于python中的xpath解析定位
2020/03/06 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
工作经验交流材料
2014/12/30 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
PO模式在selenium自动化测试框架的优势
2022/03/20 Python