Table隔行变色的JavaScript代码
<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>
<script>
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;
}
}
}
}
showtable()
</script>
Table隔行变色的JavaScript代码的更多相关文章
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- 隔行变色---简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- css 实现table 隔行变色
<html> <head> <title>Member List</title> <style> <!-- .datalist{ bo ...
- 表格(Table)隔行变色
在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...
- jquery学习笔记(4)--实现table隔行变色以及单选框选中
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- table隔行变色
table tr:nth-child(2n) { background: #EEF8F0; } table tr:nth-child(2n+1) { b ...
- CSS3 设置 Table 隔行变色
table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;}
- table隔行变色【转】
table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-chil ...
- jquery table 隔行变色+点谁谁变色
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- HDU - 3966 Aragorn's Story(树链剖分入门+线段树)
HDU - 3966 Aragorn's Story Time Limit: 3000MS Memory Limit: 32768KB 64bit IO Format: %I64d & ...
- gulp学习笔记(一)
gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览器自动 ...
- 《JS权威指南学习总结--6.8对象的三个属性》
内容要点: 每一个对象都有与之相关的原型(prototype).类(class)和可扩展性 一.原型属性 1.对象的原型属性是用来继承属性的,这个属性是如此重要,以至于我们经常把 "0的原型 ...
- POJ 2231 Moo Volume
Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Description Farmer Jo ...
- POJ 2305 Basic remains(进制转换)
题目链接:http://poj.org/problem?id=2305 ime Limit: 1000MS Memory Limit: 65536K Total Submissions: 5326 ...
- git安装后配置--config
安装git后需要配置一下环境,每台计算机上只需要配置一次,程序升级时会保留配置信息. 你可以在任何时候再次通过运行命令来修改它们. 通过git config命令来配置环境变量,这些变量存储在三个不同的 ...
- (转)J2EE中13个规范
今天在做连接oracle数据库的时候,感受到了什么是规范.平时听到别人说学习j2ee一定要学习他的十三个规范,大概的知道每个规范是做什么的,每个“接口”是做什么的. 很早就听过 ...
- hdu_5314_Happy King(树的点分治)
题目链接:hdu_5314_Happy King 题意: 给出一颗n个结点的树,点上有权值: 求点对(x,y)满足x!=y且x到y的路径上最大值与最小值的差<=D: 题解: 还是树的点分治,在统 ...
- hdu_5904_LCIS(DP)
题目链接:hdu_5904_LCIS 题意: 给你两串数,让你找这两串数的最长公共子序列,并且这个最长公共子序列是连续的数值 题解: 我们首先先分别处理出a,b的每个数的最长连续的长度 然后随便找一串 ...
- PerformSelector 和 NSInvocation