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 ...
随机推荐
- bfs或者dfs Good Bye 2016 D
http://codeforces.com/contest/750/problem/D 题目大意: 放鞭炮,鞭炮会爆炸n次,每次只会往目前前进方向的左上和右上放出他的子鞭炮.问,最后能有多少格子被覆盖 ...
- centos7 crontab笔记
1.crontab相关命令 语法:crontab [-u <用户名称>][配置文件] 或 crontab [-u <用户名称>][-elr] 参数: -e 编辑该用户的计时器设 ...
- C#打包时设置图标ico错误
1:无法生成"[DesktopFolder]"中名为"用户桌面 的快捷方式"的快捷方式在生成安装项目时报错 2:在进行安装项目时候,创建快捷方式并且设置了 ic ...
- python多进程,以及进程池并发
模拟多进程 #!/usr/bin/env python#-*- coding:utf-8 -*-import timefrom multiprocessing import Process def s ...
- jquery实现图片漂浮效果
$(window).load(function(){ function moveRocket(){ $("#float").animate({'left':'+=100'} ...
- 第一章 flume架构介绍
1.flume概念介绍 1.1 常见的分布式日志收集系统 Scribe是facebook开源的日志收集系统,在facebook内部已经得到大量的 ...
- 笔记整理--C语言
linux下错误的捕获:errno和strerror的使用 - Google Chrome (2014/2/26 17:31:39) linux下错误的捕获:errno和strerror的使用 201 ...
- 第九十六节,JavaScript概述
JavaScript概述 学习要点: 1.什么是JavaScript 2.JavaScript特点 3.JavaScript历史 4.JavaScript核心 5.开发工具集 JavaScript诞生 ...
- Struts2-3.struts.xml的action可以简写
如果只是跳转到某个页面的话,可以这样写 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE s ...
- 记第一届 CCCC-团体程序设计天梯赛决赛 参赛
其他都没什么,上午报道,下午比赛两个半小时,最后139分 但四我超遗憾的是,最后在做L3-1二叉搜索树,因为看到有辣么多人做出来,可是我没做出来啊 比赛结束后看了看其他两道当场吐血,L3-3直捣黄龙不 ...