`
少女杀手
  • 浏览: 131873 次
  • 性别: Icon_minigender_1
  • 来自: 约旦河西岸
社区版块
存档分类
最新评论

巧妙实现表格奇偶行换色

    博客分类:
  • java
阅读更多
要使在JSP页面中显示的table表格实现奇偶行换色效果,我最开始接触的就是用自定义标签,但是那样实现起来太复杂了,还麻烦,后来有了Jquery,实现起来相当简单
下面是用到的样式和JS
<style type="text/css">
table{border-collapse:collapse;}
table td{ height:21px;border:#A7DAE7 solid 1px;}
table th{ height:21px;border:#A7DAE7 solid 1px; background:#e4f3ec;}
tr.even td{ background:#9CF;}
tr.odd td{ background:#CCF;}
tr.alt td{ background:#96F;}
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
$("#market tr:odd").addClass("odd");
$("#market tr:even").addClass("even");
$("#market tr").mouseover(function(){$(this).addClass("alt");}).mouseout(function(){$(this).removeClass("alt")});
  });
</script>
<table id="market" width="200" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">价格1</th>
    <th scope="col">价格2</th>
    <th scope="col">价格3</th>
  </tr>
  <tr>
    <td id="pri1">23</td>
    <td id="pri2">45</td>
    <td id="pri3">36</td>
  </tr>
  <tr>
    <td id="pri4">33</td>
    <td id="pri5">16</td>
    <td id="pri6">27</td>
  </tr>
</table>
只需要导入Jquery文件,然后给table指定一个ID,就OK了

方法二:
但是,如果一个页面仅有一个显示数据的table,导入100多k的Jquery文件对页面的加载速度实在有影响,所以推荐使用下面的方法
 
   首先定义两个样式(基数行和偶数行的背景颜色)
   <style type="text/css">
      .row0{ background:#E9EFF8}
      .row1{ background:#E6D9F7}
    </style>

  然后用<c:foreach>迭代标签的 verStatus来做处理,就像下面这样
  <c:forEach var="item" items="${closePrice}" varStatus="rows">
    <tr class="row${rows.count%2}">       <td>${usermap.loginname }</td>
       <td>${item.produceCode }</td>
       <td>${item.forceDate }</td>
       <td>${item.forceCloseno }</td>
     </tr>
  </c:forEach>

主要的还是红色部分,这样不用导入Jquery文件也不用自定义标签,轻松的就能实现奇偶行换色功能。

方法三:
利用CSS和JS共同来完成
添加CSS样式和JS样式
<style type="text/css">
.oddrow{ background:#dff; color:#000; } 
.evenrow{background:#eef; color:#000; }
</style>

<script language="javascript"> 
onload=function(){
    var rows=document.getElementsByTagName("tr");
    for(var i=1;i <rows.length;i++){ 
        rows[i].index=i
        rows[i].className=(i%2==0)?"oddrow":"evenrow"
    } 
}
</script> 



补充,如果希望实现鼠标选中表格高亮显示可以在上面的基础上添加一些代码即可

<style type="text/css">
.oddrow{ background:#dff; color:#000; } 
.evenrow{background:#eef; color:#000; }
.highlight{background:#eef;color:#000; }
</style>

<script language="javascript"> 
onload=function(){
    var rows=document.getElementsByTagName("tr");
    for(var i=1;i <rows.length;i++){ 
        rows[i].index=i
        rows[i].className=(i%2==0)?"oddrow":"evenrow"
        rows[i].onmouseover=function(){ 
            this.className="highlight"; 
        } 
        rows[i].onmouseout=function(){ 
            this.className=this.index%2==0?"oddrow":"evenrow"; 
        }
    } 
}
</script> 



分享到:
评论

相关推荐

    表格奇偶行不同背景色.rar

    这个压缩包文件“表格奇偶行不同背景色.rar”可能包含了实现这一效果的相关资源和示例,包括一个图像文件(demo.jpg)以及几个可能与项目或应用程序相关的文件(demo.PJT、demo.pjx、demo.SCT、demo.scx)。...

    程矢Axure夜话图文教程中继器表格奇偶行换色.pdf

    本次教程将详细介绍如何利用Axure中的中继器功能来实现表格的奇偶行换色效果。 #### 二、准备工作 在开始之前,请确保你已经熟悉了Axure的基本操作,并且具备一定的中继器使用经验。如果没有,可以先参考以下教程...

    程矢Axure夜话图文教程中继器表格奇偶行换色2.pdf

    本篇文章将详细解读“程矢Axure夜话图文教程中继器表格奇偶行换色2.pdf”中的知识点,帮助读者掌握如何利用Axure实现中继器表格的奇偶行换色功能,提升原型的表现力和用户体验。 #### 二、知识点解析 ##### 2.1 ...

    Axure夜话之中继器系列视频教程之中继器表格奇偶行换色.rar

    《Axure夜话之中继器系列视频教程》是针对Axure初学者和进阶者的一套教学资源,其中“中继器表格奇偶行换色”这一章节专门讲解了如何在Axure RP中利用中继器(Repeater)组件创建交互式表格,实现行颜色的动态切换,...

    Axure夜话之中继器系列视频教程之中继器表格奇偶行换色2.rar

    在本资源中,我们主要关注的是“Axure夜话之中继器系列视频教程之中继器表格奇偶行换色2.rar”这一主题。这是一份关于Axure使用技巧的视频教程,由老二牛车教育提供,特别是针对中继器(Repeater)组件在制作HTML...

    用DOM控制的奇偶行变色的简单表格实现

    用DOM控制的奇偶行变色的简单表格实现,通过javascript实现对奇偶行的表格背景颜色的控制

    表格 各行换色

    标题“表格各行换色”指的是在电子表格或者网页中,为增强数据可读性,每行或每列采用不同颜色交替显示的一种技巧。这通常应用于大数据量的表格中,使得用户能更容易地区分不同的行,避免视觉疲劳。下面将详细阐述...

    奇偶行背景颜色不一样的数据表格.zip

    本资源"奇偶行背景颜色不一样的数据表格.zip"提供了一个关于如何在数据表格中实现奇偶行不同背景色的原型图示例,这对于提升用户体验、增强数据可读性非常有帮助。 首先,让我们了解一下“数据表格”。数据表格是一...

    CSS实现奇偶行异色.pdf

    在CSS实现奇偶行异色的设计中,主要目标是为表格的每一行应用不同的背景颜色,使得视觉效果更佳,通常用于数据展示时提高可读性。在这个例子中,我们看到一个HTML文档,其中包含了一个ID为`DataGrid1`的表格,并且...

    jquery实现表格隔行换色和鼠标经过提示效果源码

    在网页设计中,为了提升用户体验和数据可读性,经常会在表格中采用隔行换色的技巧,使得用户更容易区分不同的行数据。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,使得实现这样的功能变得非常简便。...

    表格渲染(悬浮变色,隔行换色,点击变色)

    /** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */

    Word 2021表格奇偶行交错着色轻松实现.docx

    ### Word 2021 表格奇偶行交错着色轻松实现 #### 知识点概述 在处理大量数据时,为了提高可读性和视觉效果,人们常常会选择对表格中的奇偶行进行交错着色。这一做法在Excel中较为常见且容易实现,但在Word中实现...

    jQuery实现表格奇偶行显示不同背景色 就这么简单

    做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便。通常我们是怎么实现的呢?就是在每个tr标签上加css样式。 代码如下所示: &lt;html&gt; &lt;style type=text/...

    jquery css 设置table的奇偶行背景色示例

    ### 使用jQuery和CSS设置表格奇偶行背景色 在网页设计与开发中,为了提高表格数据的可读性,我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观,还能帮助用户更轻松...

    当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同

    1. CSS实现鼠标悬停变色效果:通过CSS的:hover伪类可以实现当鼠标悬停在表格行上时改变行背景色的效果。示例代码中展示了当鼠标悬停在表格的某个行(tr元素)上时,背景色会变为#CCCCCC。 2. CSS奇偶行颜色交替:在...

    j2ee23:jquery:使用jquery技术实现奇数行偶数行换色

    通过这种方式,我们成功地利用jQuery实现了表格的奇偶行换色。这个技术可以广泛应用于各种网页应用,尤其是在展示数据列表时,能提供更好的用户体验。 总结一下,本篇文章主要介绍了如何在J2EE项目中使用jQuery来...

    自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)

    在本项目中,我们主要探讨如何制作一个自定义的jQuery插件,用于实现表格的特殊样式功能,包括奇偶行颜色交替、鼠标滑过时的颜色变化以及单击高亮的效果。这个插件对于提高用户体验和美化网页数据展示具有显著作用。...

    表格点击变色 奇偶不一样

    全部来源于网络~表格点击变色,奇偶行 比较简单~~还有好多没打包的

    js奇偶变色

    js原生代码实现表格的奇偶变色,可变色,可自定义样式

Global site tag (gtag.js) - Google Analytics