超简单表格隔行换色+鼠标经过变色(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以及Firefox。 首先，让我们从隔行换色开始。这是一种常见的CSS技巧，可以通过使用CSS伪类`:nth-child()`来实现。这个选择...
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
CSS+JS 实现表格隔行变色 鼠标移动变色
为了提高用户的阅读体验，有时候我们需要对表格进行美化，例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先，让我们了解一下JavaScript在网页中的作用。...
本教程将详细讲解如何实现表格的隔行换色以及点击整行变色的效果，这两种技术可以提升用户体验，使表格内容更加清晰易读。 首先，让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果，因为它使得交替的行...
在网页设计中，为了提升数据可读性和美观性，经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS（层叠样式表）来实现的，使得表格的每一行交替显示不同的背景颜色，从而形成视觉上的区分。在本案例中，"网页...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...
在网页设计中，为了提升用户体验和视觉效果，经常会使用到jQuery技术来实现一些动态功能，如隔行换色、鼠标经过样式变化以及标题提示效果。这些功能可以使网页更具交互性，增强用户对信息的感知。 首先，让我们了解...
"表格颜色自动隔行变色"是一种常见的美化技巧，它可以使表格看起来更清晰、更易读，帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...
js斑马线，兼容隔行变色，鼠标经过变色，鼠标离开返回，兼容所有浏览器
其中，操作表格（table）的视觉样式如隔行换色和鼠标经过变色是前端开发者经常要处理的场景。接下来，我们将从技术角度详细解读如何使用jQuery实现这两种效果。 首先，我们讨论如何实现table的隔行换色。隔行换色的...
### 隔行变色与鼠标滑过变色技术详解 在网页设计中，为了提升用户体验及美观性，经常会使用到隔行变色以及鼠标滑过时改变颜色的效果。这两种效果可以通过不同的技术来实现，包括使用`expression`（仅限于IE浏览器）...
在网页设计中，表格隔行变色是一种常见的视觉优化手段，它能帮助用户更清晰地分辨数据行，提高阅读和理解效率。特别是在处理大量数据的时间表格中，这种效果尤为重要。"表格隔行变色"技术通常结合JavaScript和CSS来...
"可编辑的表格，实现隔行换色等效果"是一个典型的功能实现，通常用于数据展示，使表格更加易读，提升视觉效果。这个功能的实现通常涉及到HTML、CSS和JavaScript技术，特别是jQuery库的运用。 首先，HTML是网页的...
在网页设计中，为了提高数据可读性和用户体验，经常需要对表格进行隔行变色处理。这使得用户在浏览大量数据时更容易区分不同的行。在本案例中，我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的...
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,