`
mimang2007110
  • 浏览: 237217 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

隔行变色一

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>表格</title>
   <script src="jquery-1.4.3.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(document).ready(function(){
     $("#ta tr").mouseover(function(){
      $(this).addClass("over");
     });
     $("#ta tr").mouseout(function(){
      $(this).removeClass("over");
     }); 
    
     $("#ta tr:even").addClass("double"); 
    });
   </script>
   <style type="text/css">
th{
background: gray;
color: white;
}

table{
width: 30em;
height: 10em;
}

td {
    border-bottom:1px solid #95bce2;
    text-align:center;
}

tr.over td{
background: #D6E8F8;
font-weight: bold;
}

tr.double td{
background: #DAF3F1;
}
   </style>
</head>

 

<body>
   <table id="ta" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>籍贯</th>
     <th>手机</th>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
   </table>
</body>
</html>

 

分享到:
评论

相关推荐

    jquery选取商品隔行变色

    "jQuery选取商品隔行变色"是一个常见的网页交互功能,主要用于电商网站的商品列表展示,使得用户在浏览长列表时能更清晰地区分各个项目。下面将详细解释如何使用jQuery实现这一功能。 首先,我们需要理解jQuery库的...

    表格颜色自动隔行变色

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

    EXCEL版本隔行变色

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

    实现表格的隔行变色

    隔行变色使得用户在查看大量数据时能更容易地区分每一行,从而减轻视觉疲劳,提高阅读效率。本文将详细讲解如何实现表格的隔行变色,并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS(Cascading ...

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

    在本案例中,"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法,包括奇偶数行的变色以及点击变色的效果。 首先,我们来了解如何实现基础的表格隔行变色。在HTML中,`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`...

    VB ListView 隔行变色

    在VB(Visual Basic)编程中,ListView控件是一种常见的...总的来说,实现VB ListView的隔行变色是一个增强用户界面体验的实用技巧,通过自定义代码或导入像`HColor.bas`这样的模块,开发者可以轻松地实现这一功能。

    表格隔行变色

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

    jQuery动态生成隔行变色的table

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

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

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

    CSS+JS实现table隔行变色

    对于table隔行变色,我们可以创建一个类,比如`.zebra-stripes`,然后将这个类添加到包含表格的`&lt;table&gt;`元素上。以下是一个简单的CSS示例: ```css .table.zebra-stripes tr:nth-child(odd) { background-color: ...

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

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

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

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

    JQ 隔行变色

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

    表格隔行变色,jquerys

    在本案例中,我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的效果。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。对于表格...

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

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

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

    隔行变色是一种常见的视觉增强技巧,它可以帮助用户更容易地区分表格中的行。在GridControl中,我们可以使用DefaultCellStyle属性来实现这一效果。在GridView的RowCellStyle事件中,根据行索引的奇偶性设置单元格的...

    php简单隔行变色功能实现代码 原创

    本文简单分析了php简单隔行变色功能实现方法。...echo 隔行变色效果:; echo ; for($i=1;$i&lt;=5;$i++){ if($i%2==0){ $color=yellow; } if($i%2==1){ $color=red; } echo ;\&gt;这是第.$i.行; } echo ; 希望本

    g隔行变色.zip

    "隔行变色"是一种常见的视觉优化技巧,它使得表格中的数据更易于阅读和理解,尤其是在大量数据的情况下。本教程将深入探讨如何使用JavaScript实现表格的隔行变色功能,并允许您根据需求自定义颜色。 首先,让我们...

    android表格效果之ListView隔行变色实现代码

    总结起来,实现ListView隔行变色的关键在于创建一个继承自`SimpleAdapter`的自定义Adapter,并重写`getView()`方法。在`getView()`中,根据行的位置动态地设置背景颜色。这种做法不仅实现了隔行变色的效果,而且易于...

    实用的隔行变色,支持3种颜色.rar

    在IT领域,尤其是在网页开发中,隔行变色是一种常见的视觉设计技巧,它可以使列表或者表格看起来更加清晰,便于阅读。这个"实用的隔行变色,支持3种颜色.rar"压缩包文件提供了实现这一效果的资源,适用于JavaScript...

Global site tag (gtag.js) - Google Analytics