表格 隔行换色升级版


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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
传智播客学习之java 反射
Nov 22 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
js实现随机点名
Jan 19 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
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
laravel5.6实现数值转换
2019/10/23 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
深入理解Python中的内置常量
2017/05/20 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
小学生学习感言
2014/03/10 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
公司门卫岗位职责
2015/04/13 职场文书
公司转让协议书
2016/03/19 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Pandas数据类型之category的用法
2021/06/28 Python