表格 隔行换色升级版


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技术实现的web小游戏(不含网游)
Jun 12 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JsChart组件使用详解
Mar 04 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
原生javascript中this几种常见用法总结
Feb 24 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
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Vue实现背景更换颜色操作
2020/07/17 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python计算文本文件行数的方法
2015/07/06 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
django中的数据库迁移的实现
2020/03/16 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
业务员自荐信范文
2014/04/20 职场文书
网络优化专员求职信
2014/05/04 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js