`

用JS实现表格中隔行显示不同颜色

阅读更多
用JS实现表格中隔行显示不同颜色

第一种:
<style>
tr{bgColor:expression(
    this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow');
}
</style>
<table id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

第二种:
<script language="javascript">
     var oTable = document.all['oTable'];
     for(var i=0;i<oTable.rows.length;i++){
          oTable.rows[i].bgColor = (i%2==0) ? 'white' : 'yellow' ;
     }
</script>
<table id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

第三种(第二种的改进版):
用布儿变量替代之:内存换时间
var isToggled = false;

var oTable = document.all['oTable'];
for(var i=0;i<oTable.rows.length;i++){
    isToggled = ! isToggled;
    oTable.rows[i].bgColor = isToggled ? "white" : "yellow" ;         
}


鼠标经过时改变背景颜色
<table><tr><td width="100" height="100" onmouseover="style.backgroundColor='#C86F70'" onmouseout="style.backgroundColor='#DDC676'" bgcolor="#DDC676">ihandu</td></tr></table>


我的方法一:
<!--<script language="javascript">
    window.onload = function(){   //表格隔行显示不同颜色
      var tab = document.getElementById('tab');
      for(var i=0;i<tab.rows.length;i++){
          tab.rows[i].bgColor = (i%2==0) ? 'white' : '#e6e6e6' ;
     }
    }
</script>
  -->


我的方法二:
<tr height = "22px" align=center style="background-color: <c:if test='${status.count%2==0}'>#FFFFFF</c:if><c:if test='${status.count%2!=0}'>#E6E6E6</c:if>" >

分享到:
评论

相关推荐

    下拉框左右移动 表格隔行显示不同颜色 分页代码

    在标题"下拉框左右移动 表格隔行显示不同颜色 分页代码"中,涉及到的是网页前端开发中的几个关键点,主要包括CSS(Cascading Style Sheets)样式设计、JavaScript实现交互式下拉框以及分页功能的实现。下面将详细...

    实现表格的隔行变色

    1. **响应式设计**:在响应式设计中,根据设备屏幕大小改变隔行颜色策略,比如在移动设备上可能不需要隔行变色。 2. **自定义样式**:除了基础的单色间隔,还可以使用渐变色、图案填充等方式增加视觉效果。 3. **...

    隔行颜色不同、隔行颜色不同

    在网页设计中,隔行颜色不同的效果通常是为了增强表格或者列表的可读性,使得用户在浏览长列表时能更容易区分每一行的信息。这个效果主要通过CSS(层叠样式表)来实现,同时结合jQuery(一种JavaScript库)进行动态...

    js 表格隔行颜色

    用JS实现表格中隔行显示不同颜色 第一种: &lt;style&gt; tr{bgColor:[removed] this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow'); } &lt;/style&gt; &lt;table id=oTable width=100 border=1 style=bo

    一天搞定jQuery(二)——使用jQuery表格的隔行换色

    在本教程中,我们将深入探讨如何使用jQuery实现表格的隔行换色效果,这是一项常见的网页美化技术,可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM操作,让...

    js表格变色制作表格隔行变色,滑过选中变色特效

    在表格变色的场景中,我们将利用JavaScript事件监听和DOM操作来实现所需的功能。 1. **隔行变色**:这个功能可以使得表格看起来更加清晰,帮助用户更容易区分不同的行。我们可以使用JavaScript遍历表格的所有行,...

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

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

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

    总的来说,实现表格隔行显示和选中行样式的插件是通过结合CSS样式和JavaScript事件处理来达到目的的。这样的工具对于前端开发者来说非常实用,可以快速地为表格添加交互效果,提升网页的用户体验。如果你正在开发或...

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

    在表格中实现多选功能,通常需要配合HTML5的`&lt;input type="checkbox"&gt;`元素和JavaScript。在表格的每一行中加入复选框,然后编写JS代码来处理选中状态。例如,可以创建一个数组来存储选中的行,当用户点击复选框时...

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

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

    js实现表格隔行变色

    在网页设计中,为了提升数据展示的可读性和美观性,常常会采用隔行变色的技巧,使得表格中的每一行交替显示不同的颜色。这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在...

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

    JavaScript表格隔行变色是一种常见的前端视觉效果,通过为表格中的行设置不同的背景颜色,使得用户浏览时能够更加容易地分辨不同的行。这种效果通常用于增强用户的阅读体验。 #### 知识点2:原生JavaScript实现方法...

    可编辑的表格,实现隔行换色等效果

    这里,我们可以使用伪类选择器`nth-child(odd)`和`nth-child(even)`来分别选择奇数行和偶数行,并赋予不同的背景颜色: ```css table tr.even { background-color: #f2f2f2; } table tr.odd { background-color:...

    表格隔行变色,jquerys

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

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

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

    jQuery实现table表格鼠标经过隔行换颜色特效代码.zip

    本资源"jQuery实现table表格鼠标经过隔行换颜色特效代码.zip"提供了一种方法,利用jQuery来实现在网页中table表格鼠标悬停时的视觉效果,即隔行变色。这一功能对于提升用户体验,使得用户在浏览数据密集型表格时能更...

    javascript实现table表格隔行变色的方法

    总结起来,JavaScript实现表格隔行变色的关键在于使用`document.getElementById`和`getElementsByTagName`来选取需要操作的元素,以及使用循环和条件语句来动态地改变元素的样式。这种方法可以很好地提升表格的视觉...

Global site tag (gtag.js) - Google Analytics