用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>" >
分享到:
相关推荐
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:[removed] this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow'); } </style> <table id=oTable width=100 border=1 style=bo
上传到公司 明天写代码用。 这都是经典的代码。
表格隔行换色 需求分析 我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色 技术分析 table对象 集合 cells[]:返回包含...
实现效果为:表格隔行换色 鼠标移过变色 实现多选效果
本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法。分享给大家供大家参考。具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果。 效果实现: 表格奇偶行的颜色不一样。这样可以防止...
本篇文章主要介绍了JS实现隔行换色的表格排序的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
前端小白入门案例使用Hbuilder国产开发工具引用jQuery库实现表格隔行换色基本功能。简化DOM操作 代码的功能如下: 1.通过选择器获取表格的表头对象(thead tr),并设置其背景颜色为navajowhite。 2.通过选择器获取...
实用的隔行变色,支持3种颜色
最近做了个项目是要求实现99乘法表隔行变色,本文给大家分享通过多种方式实现js 99 乘法表,感兴趣的朋友一起看看吧
表格行间隔显示颜色并实现高亮显示,这种效果大家都有见到过吧,下面就为大家详细介绍下,需要的朋友可不要错过
Jquery实现隔行换色特效代码是一款简单的表格隔行换色特效。
表格 隔行变色 基于JS 简单表格 颜色可以自行替换 很简单
一些css的定义,可以根据需要自己选择。//显示单双行显示不同背景色【方法一】: // $... ”UL_id”> 单数</li> 双数</li> 双数</li> </ul> odd:单 even:双 jQuery 表格隔行变色代码li隔行换色改进版JS控制表格隔行变色
Jquery 表格颜色渐变,隔行变色。鼠标移过变色,鼠标点击变色
通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除。在这的地方,可以加个特效...
实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 181 实例116 显示用户在页面的停留时间 182 实例117 显示最后修改时间 183 4.2 日期时间算法 184 实例118 计算某一天是星期几 184 实例119 判断指定...
这段JS放在head中 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById(“ServiceListTable”) for...
实例326 表格隔行变色 521 13.3 鼠标及滚动条样式 522 实例327 显示自定义鼠标形状 522 实例328 动画光标 524 实例329 制作彩色滚动条 525 13.4 文字及列表样式 527 实例330 应用删除线样式标记商品...
自定义的table样式 隔行换色,鼠标悬停变色 ,点击 变色