超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff) 收藏
前几天由于工作需要,要对一个表格进行隔行换色,还要加上鼠标经过效果,但是表格由程序生成,如果在tr标签中添加onmouseover,onmouseout效果的话工作量很大,遂尝试用js实现以上功能,唯一要对表格做的改动就是给table标签加上id.
从网上搜索了很多方法,几乎都是对tr标签进行修改,还好找到了一个完全通过js实现隔行换色的(经过转载已无法考证作者),不过不支持鼠标经过变色,经过我的修改现在已经支持鼠标经过变色了.
这段代码体现了web重构的思想,实现了结构与表现分离.
请看效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style language="text/css">
/*第一种颜色*/
#table tr.color1{
background-color:#FFFFFF;
}
/*第二种颜色*/
#table tr.color2{
background-color:#F8F8F8;
}
</style>
<script type="text/javascript">
<!--
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tableid='table'; //表格的id
var overcolor='#FCF9D8'; //鼠标经过颜色
var color1='#FFFFFF'; //第一种颜色
var color2='#F8F8F8'; //第二种颜色
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for(var i=1 ;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1";
}else{
tr[i].className="color2";
}
}
}
onloadEvent(showtable);
-->
</script>
</head>
<body id="" class="">
<table width="100%" border="0" cellspacing="1" cellpadding="4" class="list" name="table" id="table">
<thead>
<tr>
<th>流程</th>
<th>启动人</th>
<th>启动时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
</tbody>
</table>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/nxbin/archive/2009/01/17/3812652.aspx
分享到:
相关推荐
超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff)
实现效果为:表格隔行换色 鼠标移过变色 实现多选效果
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
js表格特效制作js表格变色效果,表格隔行变色,鼠标滑过显示单行变色效果,点击选中变色。内含js代码下载
表格隔行变色 表格变色 表格单元格标色,实现方式是奇偶数隔行变色,点击变色!
CSS+JS 实现表格隔行变色 鼠标移动变色
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...
主要介绍jQuery实现table隔行换色和鼠标经过变色的两种方法,需要的朋友可以参考下
表格颜色自动隔行变色
当鼠标点到那一行时哪一行就会变色 很漂亮 实用
表格隔行变色,jquerys
可编辑的表格,实现隔行换色等效果,使用jquery实现,有
js斑马线,兼容隔行变色,鼠标经过变色,鼠标离开返回,兼容所有浏览器
时间表格的隔行变色,以及鼠标移动到某行 高亮的效果
隔行换色鼠标指向表格行变色(含页面内容查找功能)、jQuery UI插件(gridster)
鼠标经过变色按钮 鼠标经过变色按钮 鼠标经过变色按钮
javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx