表格 隔行换色升级版


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写的日历(代码部分网摘)
Sep 20 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
layui实现动态和静态分页
Apr 28 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
javascript中的this作用域详解
Jul 15 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
法国房车租赁网站:Yescapa
2019/08/26 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
终端业务员岗位职责
2013/11/27 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
骨干教师考核方案
2014/05/09 职场文书
2015年计划生育责任书
2015/05/08 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python