`
yeyuan
  • 浏览: 230435 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

隔行变色

阅读更多
<!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>表格变色</title>
<script type="text/javascript">
<!--
function showtable(tableid){//构建函数showtable
var odd=false;
var tablename=document.getElementById(tableid)
var rows=tablename.getElementsByTagName("tr");
for (var i=1; i<rows.length; i++) {
if (odd==true){
   odd=false;
}else{
   rows[i].style.backgroundColor="#f1f1f1";
odd=true;
}
rows[i].bgc=rows[i].style.backgroundColor;
rows[i].onmouseover=function(){
    this.style.backgroundColor="#ccc";
    this.style.color="#f00";
   }
rows[i].onmouseout=function(){
    this.style.backgroundColor=this.bgc;
    this.style.color="#000";
   }
} 
}
window.onload=function(){
showtable("table");
}
-->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" 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>

经测试,可以正常使用!~~
分享到:
评论

相关推荐

    jquery选取商品隔行变色

    在网页设计中,为了提升用户体验和视觉效果,我们经常需要对数据列表进行美化处理,比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能,主要用于电商网站的商品列表展示,使得用户在浏览长列表时能更...

    表格颜色自动隔行变色

    "表格颜色自动隔行变色"是一种常见的美化技巧,它可以使表格看起来更清晰、更易读,帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...

    隔行变色.html

    隔行变色

    EXCEL版本隔行变色

    在Excel中,隔行变色是一种常见的数据可视化技巧,它能帮助用户更清晰地阅读和理解表格中的数据。这种效果通常通过条件格式化来实现,使得奇数行和偶数行显示不同的背景颜色,增强表格的可读性,特别是在处理大量...

    实现表格的隔行变色

    在网页设计中,为了提升数据展示的可读性和美观性,常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行,从而减轻视觉疲劳,提高阅读效率。本文将详细讲解如何实现...

    网页里面表格隔行变色代码

    在网页设计中,为了提升数据可读性和美观性,经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS(层叠样式表)来实现的,使得表格的每一行交替显示不同的背景颜色,从而形成视觉上的区分。在本案例中,"网页...

    VB ListView 隔行变色

    在某些情况下,为了提高数据的可读性和视觉效果,开发者可能会希望实现ListView的隔行变色功能。这可以通过编程方式实现,使得每两行之间具有不同的背景颜色,以创建一种对比,使用户更容易区分每一行。 标题"VB ...

    表单数据验证_表格隔行变色效果_复选框的操作_好友列表_省市菜单联动效果

    在IT领域,网页开发是不可或缺的一部分,而表单数据验证、表格隔行变色效果、复选框操作、好友列表以及省市菜单联动效果都是网页交互中的常见功能。这些功能不仅提升了用户体验,也是开发者必备的技能。下面将详细...

    CSS+JS实现table隔行变色

    在网页设计中,为了提升数据表格的可读性和视觉效果,常常会采用“隔行变色”的技巧。本文将深入探讨如何使用CSS和JavaScript来实现这一功能,以便在实际项目中应用。 首先,我们从CSS(层叠样式表)的角度出发。...

    Windows界面编程第八篇 listbox彩色显示隔行变色

    《Windows界面编程第八篇 listbox彩色显示隔行变色》 http://blog.csdn.net/morewindows/article/details/8656061 配套程序 示范了如何彩色显示listbox控件,并让其隔行变色。 Win32或MFC程序均能使用。

    gridcontrol隔行变色、焦点行颜色、改变显示值、固定列

    在本文中,我们将深入探讨如何利用GridControl实现隔行变色、设定焦点行颜色、改变显示值以及固定列不移动这四个关键功能,并提供相关的源码示例。 1. **隔行变色**: 隔行变色是一种常见的视觉增强技巧,它可以...

    表格隔行变色

    在网页设计中,表格隔行变色是一种常见的视觉优化手段,它能帮助用户更清晰地分辨数据行,提高阅读和理解效率。特别是在处理大量数据的时间表格中,这种效果尤为重要。"表格隔行变色"技术通常结合JavaScript和CSS来...

    jQuery动态生成隔行变色的table

    在网页开发中,为了提升用户体验,我们经常需要对表格数据进行视觉优化,其中一种常见的方法是实现隔行变色的效果。这个技术可以帮助用户更轻松地分辨表格中的每一行数据,提高阅读的舒适度。本教程将详细介绍如何...

    隔行变色的表格(Table)

    比较实用的隔行变色的table,带js和复选框,全选反选

    比较有用的li列表的隔行变色

    资料为HTML重的LI标签技术,实现LI列表的输出,隔行变色,实现鼠标经过变色效果

    多列列表框上色隔行变色.zip源码Labview个人项目资料程序资源下载

    多列列表框上色隔行变色.zip源码Labview个人项目资料程序资源下载多列列表框上色隔行变色.zip源码Labview个人项目资料程序资源下载多列列表框上色隔行变色.zip源码Labview个人项目资料程序资源下载多列列表框上色...

    JQ 隔行变色

    标题“JQ 隔行变色”指的是使用jQuery(简称JQ)库来实现HTML表格或其他列表元素的隔行变色效果。这种效果常见于数据展示,通过交替颜色增加可读性和视觉吸引力。让我们深入了解一下如何实现这个功能以及相关的...

    列表框插入、隔行变色、嵌入控件.zip源码Labview个人项目资料程序资源下载

    列表框插入、隔行变色、嵌入控件.zip源码Labview个人项目资料程序资源下载列表框插入、隔行变色、嵌入控件.zip源码Labview个人项目资料程序资源下载列表框插入、隔行变色、嵌入控件.zip源码Labview个人项目资料程序...

    表格隔行变色,jquerys

    在网页设计中,为了提高数据可读性和用户体验,经常需要对表格进行隔行变色处理。这使得用户在浏览大量数据时更容易区分不同的行。在本案例中,我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    ### JavaScript表格隔行变色 #### 知识点1:JavaScript表格隔行变色基本原理 JavaScript表格隔行变色是一种常见的前端视觉效果,通过为表格中的行设置不同的背景颜色,使得用户浏览时能够更加容易地分辨不同的行。...

Global site tag (gtag.js) - Google Analytics