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 ...
随机推荐
- lsof使用
用netstat命令去统计服务器目前的网络连接状态 netstat -n|awk '/^tcp/{++S[$NF]}END{for(a in S) print a,S[a]}' netstat - ...
- 七天学会ASP.NET MVC(1-3)源代码下载
原文路径: 中文: http://www.cnblogs.com/powertoolsteam/p/MVC_one.html 英文: http://www.codeproject.com/Artic ...
- Oracle获取时间日期月份星期数
1.日期和字符转换函数用法(to_date,to_char)select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') as nowTime from dual; ...
- 1.部分(苹果)移动端的cookie不支持中文字符,2.从json字符串变为json对象时,只支持对象数组
1.移动端的cookie不支持中文字符.可以用编码,解码的方式解决. 2.json字符串变成相应 的,json对象数组字符串.就这样 3.不同客户端(移动端.电脑)的请求,在C#服务端的取时间的格式竟 ...
- Java参数传递问题
参考资料:http://blog.sina.com.cn/s/blog_59ca2c2a0100qhjx.html http://blog.csdn.net/a412588063/article/ ...
- List之根据某个字段在add的时候过滤掉重复的数据
下面是重写ArrayList,并保证ChooseCars里面alpha字段不重复的例子 public class DistinctList extends ArrayList<ChooseCar ...
- HDU 2601 An easy problem
(i+1)*(j+1)=n+1 转换成上面这个式子,也就是问n+1的因子有几个 #include<cstdio> #include<cstring> #include<c ...
- L2-010. 排座位
L2-010. 排座位 题目链接:https://www.patest.cn/contests/gplt/L2-010 并查集 相关题目:L2-007. 家庭房产,L3-003. 社交集群 下午打的时 ...
- LINQ 查询集合总的重复项
select new FMDS_FarmPlotNewInfo { FarmPlo ...
- iOS开发瀑布流的实现
//自定义布局,继承于UICollectionViewLayout #import <UIKit/UIKit.h> @class WaterFlowLayout; @protocol W ...