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 ...
随机推荐
- mac上搭建python+selenium2的环境
1.mac默认已安装有python和easy_install 2.进入终端,使用root的权限,然后输入,回车后需要root的密码,即可安装成功,成功结果如下所示 sudo easy_install ...
- redhat nginx 启动脚本
#!/bin/sh # # nginx - this script starts and stops the nginx daemin # # chkconfig: - 85 15 # descrip ...
- Collector
安装 参考安装文章 创建项目project 转到你创建的目录,运行命令 django-admin.py startproject collector 生成下列文件 collector/ __ini ...
- Android app作为系统应用实现功能笔记
1.禁用StatusBar相关功能需要添加权限 <uses-permission android:name="android.permission.STATUS_BAR"&g ...
- js监听事件 上滑消失下滑出现的效果 触摸与手势事件
https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...
- HDU 5784 How Many Triangles
计算几何,极角排序,双指针,二分. 直接找锐角三角形的个数不好找,可以通过反面来求解. 首先,$n$个点最多能组成三角形个数有$C_n^3$个,但是这之中还包括了直角三角形,钝角三角形,平角三角形,我 ...
- Windows中 RabbitMQ安装与环境变量配置
RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议.1:安装RabbitMQ需要先安装Erlang语言开发包.下载地址 ht ...
- Objetive-C initialize研究
initialize执行时机 在向一个类执行实例方法或者类方法(除了initialize和load方法之外)的时候,触发initialize方法,因此如果一个类你没有使用的时候,是 ...
- Django中的ORM
Django中ORM的使用. 一.安装python连接mysql的模块:MySQL-python sudo pip install MySQL-python 安装完成后在python-shell中测试 ...
- 朱丽叶—Cuda+OSG
#include <cuda_runtime.h> #include <osg/Image> ; typedef struct cuComplex { float r; flo ...