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 ...
随机推荐
- javaMail邮件发送的简单实现
package com.test.mail; import java.util.Properties; import javax.mail.Message; import javax.mail.Ses ...
- win10 Incredibuild 兼容
电脑换了win10,所有的软件都需要重新安装. win10的体验还是很不错的.但是也有一堆的问题.原来的vs2010今天无法再使用分布式编译IncrediBuild. 现象是,虽然可以连上分布式编译的 ...
- react学习笔记-01
1. HTML模板 Jsx是react的语法糖,最终会被编译成js语法.因此需要第三方库browser将jsx转换成js. 由于react 0.14版本之后,将react和react-dom拆分,所以 ...
- 对dpkg: error processing package xxx (--configure) 的处理
这个问题是在在安装Deepdive时候碰到的,具体来说在执行 sudo apt-get update碰到的sudo mv /var/lib/dpkg/info/ /var/lib/dpkg/info_ ...
- Vue.js 指南-基础
Installation 可以使用的方式: script标签方式加载vue.js cdn https://unpkg.com/vue@2.0.5/dist/vue.js npm Introductio ...
- RF+Jenkins构建持续集成
引入RF是为了能够快速的开展自动化验收测试,Jenkins而一种持续集成工具,用于监控持续重复的工作,持续的软件版本发布/测试项目,而通过RF+Jenkins可以有利的对RF构建的接口项目进行持续集成 ...
- 大数据时代之hadoop(四):hadoop 分布式文件系统(HDFS)
分布式文件系统即是网络中多台计算机组合在一起提供一个统一存储及管理的系统. Hadoop提供了一个文件系统接口和多个分布式文件系统实现,其中比较重要的就是HDFS(Hadoop Distributed ...
- Java的I/O总结
概念:Java语言中数据流是接收和发送数据的管道.流是一位单项的. 流的分类: 按照字节字符:InputStream和OutputStream是字节输入输出流的抽象父类.Reader和Writer是字 ...
- SignalR的坑爹细节
好吧!SignalR的确是好用,照着官网的例子自己敲了一遍,死活得不到效果... 检查了半天,抱着试一试的心态吧原来在服务端大写开头的Hub类和大写开头的方法在客户端调用的时候,全部改成小写,一刷新, ...
- LeetCode OJ combine 3
public class Solution { public List<List<Integer>> combinationSum3(int k, int n) { retur ...