Table隔行变色的JavaScript代码
更新时间：2011年01月17日 22:28:52 作者：
用js实现的table隔行变色，鼠标放上去有变色显示，需要的朋友可以参考下。
效果演示代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
核心代码:
function showtable(){
var color1 = "rgb(234,240,255)";
var color2 = "rgb(255,255,255)";
var bgColor = "rgb(255,255,193)";
var trs = document.getElementById("datatable").getElementsByTagName("tr");
for (var i=0;i<trs.length-1;i++){
if (i%2==0) {
trs[i].style.backgroundColor=color1;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color1;
}
} else {
trs[i].style.backgroundColor=color2;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color2;
}
}
}
}
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
核心代码:
复制代码 代码如下:
function showtable(){
var color1 = "rgb(234,240,255)";
var color2 = "rgb(255,255,255)";
var bgColor = "rgb(255,255,193)";
var trs = document.getElementById("datatable").getElementsByTagName("tr");
for (var i=0;i<trs.length-1;i++){
if (i%2==0) {
trs[i].style.backgroundColor=color1;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color1;
}
} else {
trs[i].style.backgroundColor=color2;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color2;
}
}
}
}
相关文章
今天小编就为大家分享一篇关于JS无限级导航菜单实现方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了js实现向右横向滑出的二级菜单效果,涉及javascript鼠标事件及页面元素的隐藏与显示实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本篇文章主要介绍了ES6 Proxy使用场景介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
@ResponseBody 和 @RequestBody 注解的区别
这篇文章主要介绍了@ResponseBody 和 @RequestBody 注解的区别的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了ES6概念 Symbol toString()方法,需要的朋友可以参考下2016-12-12
JSON与String互转的实现方法(Javascript)
下面小编就为大家带来一篇JSON与String互转的实现方法(Javascript) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
基于Bootstrap table组件实现多层表头的实例代码
Bootstrap table还有一个很多强大的功能，下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码，需要的朋友参考下吧2017-09-09
这篇文章主要介绍了如何解决html按钮切换绑定不同函数后点击时执行多次函数问题,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了JS自定义选项卡函数及用法,以实例形式较为详细的分析了javascript自定义tab切换函数及使用方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了详解Document.Cookie的相关资料,需要的朋友可以参考下2015-12-12
最新评论