Table隔行变色的JavaScript代码

效果演示代码:
</p> <table id="datatable"> <tr> <td>北冥有鱼</td> </tr> <tr> <td>www.jb51.net</td> </tr> <tr> <td>北冥有鱼</td> </tr> <tr> <td>www.jb51.net</td> </tr> <tr> <td>北冥有鱼</td> </tr> <tr> <td>www.jb51.net</td> </tr> <tr> <td>北冥有鱼</td> </tr> <tr> <td>www.jb51.net</td> </tr> </table> <p>
[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控制表格隔行变色
• js取模（求余数）隔行变色
• JS小功能(列表页面隔行变色)简单实现
• 原生JS操作网页给p元素添加onclick事件及表格隔行变色
• javascript实现table表格隔行变色的方法
• js隔行变色、鼠标划过变色代码
• 高效的表格行背景隔行变色及选定高亮的JS代码
• JS与jQuery实现隔行变色的方法
• JavaScript实现99乘法表及隔行变色实例代码
• 纯js实现隔行变色效果