表格 隔行换色升级版


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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
vue组件实例解析
Jan 10 Javascript
js实现拖拽功能
Mar 01 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
JavaScript canvas实现流星特效
May 20 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新手上路(十三)
2006/10/09 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php 分库分表hash算法
2009/11/12 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
shiro授权的实现原理
2017/09/21 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python切片操作实例分析
2018/03/16 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
自我反省检讨书
2014/01/23 职场文书
投资意向书
2014/07/30 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL