用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> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </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> </td></tr>
<tr><td> </td></tr>
<tr><td> </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实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:[removed] this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow'); } </style> <table id=oTable width=100 border=1 style=bo
在本教程中,我们将深入探讨如何使用jQuery实现表格的隔行换色效果,这是一项常见的网页美化技术,可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM操作,让...
在表格变色的场景中,我们将利用JavaScript事件监听和DOM操作来实现所需的功能。 1. **隔行变色**:这个功能可以使得表格看起来更加清晰,帮助用户更容易区分不同的行。我们可以使用JavaScript遍历表格的所有行,...
在本案例中,"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法,包括奇偶数行的变色以及点击变色的效果。 首先,我们来了解如何实现基础的表格隔行变色。在HTML中,`<table>`元素用于创建表格,`<tr>`...
总的来说,实现表格隔行显示和选中行样式的插件是通过结合CSS样式和JavaScript事件处理来达到目的的。这样的工具对于前端开发者来说非常实用,可以快速地为表格添加交互效果,提升网页的用户体验。如果你正在开发或...
在表格中实现多选功能,通常需要配合HTML5的`<input type="checkbox">`元素和JavaScript。在表格的每一行中加入复选框,然后编写JS代码来处理选中状态。例如,可以创建一个数组来存储选中的行,当用户点击复选框时...
本示例"实现表格隔行换色效果"主要涉及JavaScript(JS)编程和HTML表格元素的使用,旨在通过JS特效提升用户体验。下面将详细解释如何利用JavaScript实现这一功能。 首先,我们需要理解HTML表格的基本结构。`<table>...
在网页设计中,为了提升数据展示的可读性和美观性,常常会采用隔行变色的技巧,使得表格中的每一行交替显示不同的颜色。这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在...
JavaScript表格隔行变色是一种常见的前端视觉效果,通过为表格中的行设置不同的背景颜色,使得用户浏览时能够更加容易地分辨不同的行。这种效果通常用于增强用户的阅读体验。 #### 知识点2:原生JavaScript实现方法...
这里,我们可以使用伪类选择器`nth-child(odd)`和`nth-child(even)`来分别选择奇数行和偶数行,并赋予不同的背景颜色: ```css table tr.even { background-color: #f2f2f2; } table tr.odd { background-color:...
在本案例中,我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的效果。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。对于表格...
首先,让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果,因为它使得交替的行呈现出不同的颜色,从而帮助用户更容易地分辨出每一行。在HTML中,我们可以通过CSS(Cascading Style Sheets)来实现这一功能...
本资源"jQuery实现table表格鼠标经过隔行换颜色特效代码.zip"提供了一种方法,利用jQuery来实现在网页中table表格鼠标悬停时的视觉效果,即隔行变色。这一功能对于提升用户体验,使得用户在浏览数据密集型表格时能更...
总结起来,JavaScript实现表格隔行变色的关键在于使用`document.getElementById`和`getElementsByTagName`来选取需要操作的元素,以及使用循环和条件语句来动态地改变元素的样式。这种方法可以很好地提升表格的视觉...