`
menjoy
  • 浏览: 422929 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

表格隔行换色

阅读更多
摘自: 
    http://www.blueidea.com/bbs/NewsDetail.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8&DaysPrune=60&lp=1&id=2232008 
      
      
    表格隔行换色,节省代码的好方法 
    <style> 
    .db { border-collapse:collapse;} 
    .db tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); } 
    </style> 
    <table width="100%" border="1" class="db"> 
    <tr> 
    <td> </td> 
    </tr> 
    <tr> 
    <td> </td> 
    </tr> 
    <tr> 
    <td> </td> 
    </tr> 
    <tr> 
    <td> </td> 
    </tr> 
    </table> 
      
    上面是每一行隔行换色每两行一循环,下面是每一行隔行换色,每八行一循环 
    <style> 
    .db tr{ 
    background-color:expression('#000000,#333333,#555555,#777777,#999999,#bbbbbb,#dddddd,#ffffff'.split(',')[rowIndex%8]); 
    } 
    </style>
分享到:
评论

相关推荐

    表格隔行换色 鼠标移过变色

    "表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段,它们可以使得表格内容更易于阅读,同时提升用户体验。在JavaScript(JS)的帮助下,我们可以轻松实现这些效果。 1. **隔行换色**: 隔行换色通常使用...

    实现表格隔行换色效果.rar

    本示例"实现表格隔行换色效果"主要涉及JavaScript(JS)编程和HTML表格元素的使用,旨在通过JS特效提升用户体验。下面将详细解释如何利用JavaScript实现这一功能。 首先,我们需要理解HTML表格的基本结构。`&lt;table&gt;...

    超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff)

    下面我们将详细探讨如何实现“超简单表格隔行换色+鼠标经过变色”这一功能,并兼容IE6、IE7以及Firefox。 首先,让我们从隔行换色开始。这是一种常见的CSS技巧,可以通过使用CSS伪类`:nth-child()`来实现。这个选择...

    表格隔行换色,真是方便,摘自经典论坛

    在IT行业中,尤其是在网页开发和数据展示领域,表格隔行换色是一种常见的视觉优化技巧,它使得大量数据更易于阅读和理解。这个技巧通常应用于HTML、CSS和JavaScript中,通过CSS样式来实现。本篇文章将深入探讨这个...

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

    本篇将详细介绍如何使用jQuery实现表格隔行换色以及鼠标经过时显示提示效果。 首先,我们需要理解jQuery的基本用法。jQuery通过选择器(如`$("#id")`、`$(".class")`或`$("tag")`)找到页面中的元素,然后对这些...

    jQuery-dnTableEx V2.0 一个基于jQuery功能强大的表格隔行换色和分页插件

    jQuery-dnTableEx V2.0 基于Jquery的表格隔行换色和分页插件 唐宁软件团队出品的免费表格隔行换色和分页插件: API lang: "cn", //切换默认中英文按钮名称 默认cn ifdnTableExColor: true, //调用隔行变色功能 默认...

    基于Jquery的表格隔行换色,移动换色,点击换色插件

    标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能,包括隔行换色、移动换色以及点击换色。首先,我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...

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

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

    表头拖动效果|表格隔行换色效果|大气的表格样式|选择行底色突出显示

    2. **表格隔行换色效果**:也称为交错行颜色或Zebra Striping,这是一种常见的优化可读性的设计技巧。通过在交替的行中使用不同的背景色,可以更轻松地引导用户的眼睛跟踪行间的差异,尤其是当数据量较大时。实现这...

    jquery实现表格隔行换色效果

    在Web开发中,实现表格隔行换色是一个常见的页面美化功能,它不仅能够提高表格数据的可读性,还能让浏览者获得更好的视觉体验。本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery...

    jquery实现隔行换色特效代码.zip

    以上就是使用jQuery实现表格隔行换色特效的基本方法。这种方法可以提高表格的可读性,使用户更容易区分不同的行。当然,实际应用中可能需要根据具体的页面设计调整颜色方案和细节处理,例如添加过渡效果等。 在给定...

    使用JQ完成表格隔行换色的简单实例

    总的来说,通过jQuery实现表格隔行换色是前端开发中常见的一种优化手段。它利用了jQuery的选择器功能和CSS的类应用,使得代码更简洁,同时提高了可维护性。在实际项目中,可以根据需求选择直接使用JavaScript设置...

    Js 实现表格隔行换色一例

    在网页中实现表格隔行换色是一种常见的增强用户阅读体验的方式,隔行换色可以使表格的数据对比更加清晰,同时让整个表格的视觉效果更佳。Js(JavaScript)是一种广泛用于网页开发的脚本语言,利用Js可以实现各种动态...

    表格 隔行换色升级版

    表格隔行换色是一种常见的网页美化技术,主要是为了提高用户在查看大量数据时的可读性和视觉舒适度。在传统的HTML表格中,如果一个页面包含多个表格,每个表格都需要独立设置隔行换色,这可能会导致代码重复和维护...

    表格table隔行换色以及点击整行变色.rar

    首先,让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果,因为它使得交替的行呈现出不同的颜色,从而帮助用户更容易地分辨出每一行。在HTML中,我们可以通过CSS(Cascading Style Sheets)来实现这一功能...

    基于JavaScript实现表格隔行换色

    在JavaScript中实现表格隔行换色,主要涉及到以下几个关键点: 1. **表格对象与属性**:HTML中的`&lt;table&gt;`元素在JavaScript中可以通过`document.getElementById()`方法获取到,这个对象提供了访问表格内部元素的...

Global site tag (gtag.js) - Google Analytics