0 0

如何让表格的奇数行和偶数行具有不同的背景颜色?10

<style type="text/css">
td  
  {   
    background-color:expression(parentElement.rowIndex%2==0?'#F7F7EF':'#E6E6CC');   
  }
</style>
   

 

2010年1月28日 17:00

1个答案 按时间排序 按投票排序

0 0

采纳的答案

<table   border=1   id=tab1>  
  <tr><td>aaa</td><td>bbb</td></tr>  
  <tr><td>aaa</td><td>bbb</td></tr>  
  <tr><td>aaa</td><td>bbb</td></tr>  
  <tr><td>aaa</td><td>bbb</td></tr>  
  <tr><td>aaa</td><td>bbb</td></tr>  
  <tr><td>aaa</td><td>bbb</td></tr>  
  </table>  
   
  <script   language=javascript>  
  var   a = document.all.tab1.getElementsByTagName("tr");  
  for   (var   i=0;   i<a.length;   i++)  
  {  
        a[i].style.background=(i%2==1)   ?   "#C0C0C0"   :   "#FFFFFF";    
  }  
  </script>

2010年1月28日 17:20

相关推荐

    JAVA_JTable_奇数行和偶数行设定显示不同颜色.doc

    在构造函数中,`JTableDemo` 初始化了这些颜色属性,并设置了网格线颜色和行高度。 为了实现行颜色的自定义,`JTableDemo` 类创建了一个内部类 `MyCellRenderer`,它继承自 `DefaultTableCellRenderer`。`...

    表格奇数偶数行条纹效果(jQuery)

    为了解决这个问题,"表格奇数偶数行条纹效果"被广泛采用,它通过交替颜色的方式使表格更加清晰易读。本教程将深入探讨如何使用jQuery 1.5版本实现这一效果,同时也会讲解如何在鼠标悬停和点击时改变行的背景色,增强...

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

    对于表格,我们可以使用`:nth-child()`伪类选择器来为奇数行和偶数行设置不同的背景颜色。例如: ```css table tr:nth-child(odd) { background-color: #f2f2f2; /* 奇数行背景色 */ } table tr:nth-child(even) ...

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

    在网页的表格(table)中,通过改变奇数行和偶数行的背景颜色,可以提高数据的可读性,这种效果通常被称为“斑马纹”或“条纹”效果。这种方法可以使用户更容易区分不同的数据行,特别是在处理大量信息时。 要实现...

    表格颜色自动隔行变色

    隔行变色的基本原理是通过编程或者设置表格样式,使表格的偶数行或奇数行显示不同的背景颜色。这种色彩的交替使得表格行与行之间产生视觉差异,减轻了阅读时的疲劳感,提高了信息的可读性。 2. 实现方法: - ...

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

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

    jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

    在前端开发中,为表格中的奇数行和偶数行设置不同样式是常见的需求,这样做可以提升用户阅读表格数据时的视觉体验。本文将介绍如何使用jQuery来实现这一效果,并结合提供的代码段进行详细解析。 首先,我们可以看到...

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

    3. **样式定义**:文件可能会有CSS样式的定义,定义奇数行和偶数行的不同背景颜色。 4. **注释和说明**:设计师可能会添加注释来解释设计决策,或者提供实现这种效果的具体步骤。 学习和理解这个原型图,可以帮助...

    PB数据窗口中行、列、及某一行中的某一列颜色设置

    例如,你可以为奇数行和偶数行设置不同的背景色,以创建类似表格的交替行效果。 - 使用`SetRowColor`方法可以动态地改变行的背景色。这个方法接受行号和颜色值作为参数,允许你在运行时改变特定行的颜色。 2. **列...

    C# 根据表格偶数、奇数加载不同颜色

    在C#编程中,我们经常需要为用户界面增添视觉效果以提高用户体验,比如根据表格行的偶数或奇数设置不同的背景颜色。这个场景通常出现在数据列表或者表格控件中,例如WPF中的DataGrid或者WinForms中的DataGridView。...

    在word的表格中实现隔行更换背景颜色-WORD应用技巧

    在Word文档中,为了使表格看起来更清晰、更有层次感,有时我们需要对表格的行进行隔行更换背景颜色。在Word 2007中,虽然不像Excel那样直接提供这样的功能,但我们可以通过巧妙地利用Excel表格和其内置的公式来实现...

    labview表格上色子vi

    "labview表格上色子VI"是一个自定义的LabVIEW虚拟仪器(VI),其主要功能是对表格进行视觉增强,通过为表格的奇数行和偶数行涂上不同颜色来提高数据可读性和区分度。 在LabVIEW中,标准的表格操作可能无法满足所有...

    JavaScript改变表格单元格的背景颜色 - 支持多浏览器

    在JavaScript中,改变表格(Table)单元格(TD)的背景颜色是一项常见的需求,尤其是在创建交互式网页时。本文将详细介绍如何使用JavaScript实现这一功能,并确保兼容多种浏览器,包括Chrome、Firefox、Safari、Edge...

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

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

    表格列表偶数列、奇数列的CSS样式示例

    通过这些CSS规则,我们可以创建一个美观且功能丰富的表格列表,其中偶数行和奇数行有明显的视觉差异,表头突出,鼠标悬停时有反馈,从而提高了用户的浏览体验。在实际应用中,可以根据项目需求调整颜色、字体、边框...

    设置表格隔行显示和选中行样式的插件

    例如,可以使用`nth-child`选择器来针对奇数行和偶数行设置不同的背景颜色: ```css tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #ffffff; } ``` 但这里提到的是...

    前端JavaScript隔行换色

    前端小白入门案例使用Hbuilder国产开发工具引用jQuery库实现表格隔行换色基本功能。...通过执行这段代码,可以将表格的表头背景颜色设置为navajowhite,奇数行背景颜色设置为skyblue,偶数行背景颜色设置为pink。

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

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

    表格奇偶行设置不同颜色的核心JS代码

    这个函数的工作是为奇数行和偶数行应用不同的背景颜色。在jQuery中,可以使用选择器来选取奇数行和偶数行。例如,$("#Table tr:odd")代表选取id为Table的表格中所有奇数行,而$("#Table tr:even")则代表选取所有偶数...

Global site tag (gtag.js) - Google Analytics