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