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 ...
随机推荐
- 浏览器exp使用经验
0x00背景 windows平台下,浏览器安全是绕不过的话题,其涉及的安全问题涵盖二进制和web,攻击场景也非常多样化: 用户点击攻击者的恶意URL链接被感染恶意代码 访问恶意站点被绕过同源策略窃取c ...
- Myeclipse启动错误
问题描述: Errors occurred during the build.Errors running builder 'DeploymentBuilder' on project 'szoa'. ...
- MongoDB本地安装与启用(windows )
MongoDB的安装与MongoDB服务配置 Mongo DB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.Mongo DB很好的实现了 ...
- Mybatis(一)
jdbc开发 1)优点:简单易学,上手快,非常灵活构建SQL,效率高 2)缺点:代码繁琐,难以写出高质量的代码(例如:资源的释放,SQL注入安全性等) 开发者既要写业务逻辑,又要写对象的创建和销毁, ...
- boolean attribute(布尔值属性) attribute vs property
boolean attribute(布尔值属性) boolean attribute HTML - Why boolean attributes do not have boolean val ...
- php 5.5 xhprof for windows
今天看到一个好的性能优软件xhprof(有facebook开发的类库)在国内找了很多网站都没有找到相关php5.5的扩展,只好FQ还是外面的世界精彩一下就找到了link (http://windows ...
- chrome pyv8下载
url: https://code.google.com/archive/p/pyv8/downloads linux命令: $sudo pip install -v pyv8
- maven创建spring项目之后,启动报错java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoade
错误: org.apache.catalina.core.StandardContext listenerStart严重: Error configuring application listener ...
- LYF电子书制作工具(CHM格式)
可以制作CHM电子书 可以制作电子相册 下载地址:http://files.cnblogs.com/files/blogLYF/LYF电子书制作安装包.zip http://files.cnblogs ...
- How to solve java.net.SocketTimeoutException:60000millis problem in HDFS
Many HDFS users encounter the following error when DFSClient ready file from a certain Data Node. & ...