巧妙实现表格奇偶行换色
要使在JSP页面中显示的table表格实现奇偶行换色效果,我最开始接触的就是用自定义标签,但是那样实现起来太复杂了,还麻烦,后来有了Jquery,实现起来相当简单
下面是用到的样式和JS
<style type="text/css">
table{border-collapse:collapse;}
table td{ height:21px;border:#A7DAE7 solid 1px;}
table th{ height:21px;border:#A7DAE7 solid 1px; background:#e4f3ec;}
tr.even td{ background:#9CF;}
tr.odd td{ background:#CCF;}
tr.alt td{ background:#96F;}
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#market tr:odd").addClass("odd");
$("#market tr:even").addClass("even");
$("#market tr").mouseover(function(){$(this).addClass("alt");}).mouseout(function(){$(this).removeClass("alt")});
});
</script>
<table id="market" width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">价格1</th>
<th scope="col">价格2</th>
<th scope="col">价格3</th>
</tr>
<tr>
<td id="pri1">23</td>
<td id="pri2">45</td>
<td id="pri3">36</td>
</tr>
<tr>
<td id="pri4">33</td>
<td id="pri5">16</td>
<td id="pri6">27</td>
</tr>
</table>
只需要导入Jquery文件,然后给table指定一个ID,就OK了
方法二:
但是,如果一个页面仅有一个显示数据的table,导入100多k的Jquery文件对页面的加载速度实在有影响,所以推荐使用下面的方法
首先定义两个样式(基数行和偶数行的背景颜色)
<style type="text/css">
.row0{ background:#E9EFF8}
.row1{ background:#E6D9F7}
</style>
然后用<c:foreach>迭代标签的 verStatus来做处理,就像下面这样
<c:forEach var="item" items="${closePrice}" varStatus="rows">
<tr class="row${rows.count%2}"> <td>${usermap.loginname }</td>
<td>${item.produceCode }</td>
<td>${item.forceDate }</td>
<td>${item.forceCloseno }</td>
</tr>
</c:forEach>
主要的还是红色部分,这样不用导入Jquery文件也不用自定义标签,轻松的就能实现奇偶行换色功能。
方法三:
利用CSS和JS共同来完成
添加CSS样式和JS样式
- <style type="text/css">
- .oddrow{ background:#dff; color:#000; }
- .evenrow{background:#eef; color:#000; }
- </style>
- <script language="javascript">
- onload=function(){
- var rows=document.getElementsByTagName("tr");
- for(var i=1;i <rows.length;i++){
- rows[i].index=i
- rows[i].className=(i%2==0)?"oddrow":"evenrow"
- }
- }
- </script>
<style type="text/css">
.oddrow{ background:#dff; color:#000; }
.evenrow{background:#eef; color:#000; }
</style><script language="javascript"> var rows=document.getElementsByTagName("tr");for(var i=1;i <rows.length;i++){ rows[i].index=irows[i].className=(i%2==0)?"oddrow":"evenrow"}
}
</script>
补充,如果希望实现鼠标选中表格高亮显示可以在上面的基础上添加一些代码即可
- <style type="text/css">
- .oddrow{ background:#dff; color:#000; }
- .evenrow{background:#eef; color:#000; }
- .highlight{background:#eef;color:#000; }
- </style>
- <script language="javascript">
- onload=function(){
- var rows=document.getElementsByTagName("tr");
- for(var i=1;i <rows.length;i++){
- rows[i].index=i
- rows[i].className=(i%2==0)?"oddrow":"evenrow"
- rows[i].onmouseover=function(){
- this.className="highlight";
- }
- rows[i].onmouseout=function(){
- thisthis.className=this.index%2==0?"oddrow":"evenrow";
- }
- }
- }
- </script>
转载于:https://blog.51cto.com/515797746/1154654
巧妙实现表格奇偶行换色相关推荐
- 前端简单入门第十八讲 使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲 使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
- php表单偶数变颜色,利用CSS3 nth-child()选择器 实现表格奇偶行变色
nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...
- 前端html利用CSS实现table表格斑马纹隔行换色效果
在网页中,表格是一种常用的数据展示方式,如下面的实例就是一个收支数据的表格. <!DOCTYPE html> <html lang="en"><hea ...
- Bootstrap3基础 table-striped 表格实现隔行换色(浅灰色与白色交替)
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 微信小程序表格实现隔行换色
微信小程序的表格样式实现隔行换色: 用三元表达式改变标签class名, 在wxss分别写不同的类名: flex-view-itemodd flex-view-itemeven <view cla ...
- CSS3的nth-child() 选择器,表格奇偶行变色
nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一 ...
- 一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...
- JS-隔行换色+鼠标移上去变色
<style>ul{list-style: none;} </style> <body><ul><li>111</li>< ...
- 网上找到一个用不同颜色显示表格奇偶行的例子
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色,一看就明白
最主要就是用到属性的绑定 :class (动态绑定多个class) :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',select ...
最新文章
- c语言中的普通字符包括什么,【判断题】C语言中的字符常量通常有两种形式:普通字符和转义字符。...
- python运行一个项目_Django 项目创建到启动(最全最详细的第一个项目)
- jQuery筛选器常用总结
- 第六章 PX4-Sensors解析
- 使用 nw-builder 构建跨平台桌面应用程序
- python建立一个字符串_python字符串基本方法
- 如何在Visual Studio 2010 32 Bits中的通过Project的Post-build Event执行 64bits的PowerShell
- 跟着开源项目学因果推断——whynot(十四)
- zabbix监控web
- PLSQL提交带有模板的报表的方法
- gis坐标北京54转WGS84坐标系
- Android Tombstone/Crash的log分析和定位(墓碑文件)
- Spring boot出现java.awt.HeadlessException【已解决】
- 167. 两数之和 II - 输入有序数组(java)
- spring AspectJ的Execution表达式expression
- android app 设置以太网静态Ip
- 微信居然有“隐身功能”了?
- rtx服务器设置 文件,rtx 服务器 文件传输 配置
- 发光二极管和光敏二极管
- pytorch实战(四)——模型的保存与读取