表格 隔行换色升级版

 更新时间:2009年11月07日 00:23:26   投稿:mdxy-dxy  
表格隔行换色升级版,直接用javascript实现。

昨天弄了个表格隔行换色,但是只是一张表里换
如果一个页面里出现多个表格需要怎么整
捣鼓出新的结果
如下:

复制代码 代码如下:

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中数据结构与算法(二):队列

    这篇文章主要介绍了JavaScript中数据结构与算法(二):队列,队列是只允许在一端进行插入操作,另一个进行删除操作的线性表,队列是一种先进先出(First-In-First-Out,FIFO)的数据结构,需要的朋友可以参考下
    2015-06-06
  • IE6中链接A的href为javascript协议时不在当前页面跳转

    IE6中链接A的href为javascript协议时不在当前页面跳转

    IE6中当链接A的href为javascript协议时不能在当前页面跳转,本例给出有效的解决方法,大家不妨参考下
    2014-06-06
  • javascript:void(0)是什么意思示例介绍

    javascript:void(0)是什么意思示例介绍

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值,有不了解的朋友可以参考下本文
    2013-11-11
  • Bootstrap3 Grid system原理及应用详解

    Bootstrap3 Grid system原理及应用详解

    这篇文章主要为大家详细介绍了Bootstrap3 Grid system原理及应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • js同源策略详解

    js同源策略详解

    这篇文章主要介绍了js同源策略,较为详细的分析了javascript中同源策略的概念与相关应用注意事项,需要的朋友可以参考下
    2015-05-05
  • JavaScript循环遍历的24个方法,你都知道吗

    JavaScript循环遍历的24个方法,你都知道吗

    这篇文章主要给大家介绍了关于JavaScript循环遍历的24个方法,文中对每种方法都给出了详细的实例代码,方便大家理解学习,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • 基于JavaScript实现移动端TAB触屏切换效果

    基于JavaScript实现移动端TAB触屏切换效果

    我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。
    2015-10-10
  • JS如何实现动态添加的元素绑定事件

    JS如何实现动态添加的元素绑定事件

    这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 小程序中的箭头函数的具体使用

    小程序中的箭头函数的具体使用

    这篇文章主要介绍了小程序中的箭头函数的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子

    一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子

    下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子
    2009-05-05

最新评论