简单实用的基于jQuery的表格样式（隔行换色+鼠标经过高亮）

最新推荐文章于 2022-05-16 21:41:45 发布

easinchu

最新推荐文章于 2022-05-16 21:41:45 发布

阅读量180

点赞数

分类专栏： Web 文章标签： jQuery JavaScript CSS IE 浏览器 ViewUI

本文链接：https://blog.csdn.net/easinchu/article/details/83533276

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[b]希望各位高手高抬贵手，对于你们来说确实是简单的效果，请不要见怪。。。大牛们就掠过吧！ [/b]
最近在搞项目的时候经常涉及到页面表格数据的显示，满屏幕的数据给用户寻找某一行带来了视觉上的挑战，小弟我也是jQuery的初学者，结合网上的资料编写了简单的效果，感觉还蛮使用的，发出来大家分享下：

[b]鼠标经过高亮效果截图：[/b]
[img]http://dl.iteye.com/upload/attachment/197700/07c96708-6808-3e45-9753-2b0961a1bde2.jpg[/img]

[b]再添加隔行换色以后效果图：[/b]

[img]http://dl.iteye.com/upload/attachment/201052/ea957d7e-28d5-3713-bf4a-6e1feb0a2d28.jpg[/img]

[b][color=red]但是此部分的隔行换色只能在IE上实现，其他浏览器没这个效果，希望哪位能够提提你的高见，实在是小弟我是初学者。[/color]
[/b]
[b]关键代码：[/b]
[b]CSS文件：[/b]


body {
				font-size: 10pt;
			}
			.listView th {
				font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				color: #4f6b72;
				border: 1px solid #97c8ff;
				letter-spacing: 2px;
				text-transform: uppercase;
				text-align: left;
				padding: 6px 11px;
				background: #b9e6fd  no-repeat;
			}
			.listView tr {
			 background-color:expression(this.rowIndex%2==0 ? "#F8F8F8":"#95bce2");
			 cursor:hand;
			}
			.listView td {
				border: 1px solid #97c8ff;
				font-size:12px;
				color: #4f6b72;
				padding: 6px 11px;   
				border-bottom: 1px solid #95bce2;   
			}     
			tr.over td {   
				background: #cccccc;
			}

[b]JS代码主要完成鼠标高亮效果：[/b]


			$(document).ready(function(){
				$("tr").mouseover(function(){
					$(this).addClass("over");
				}).mouseout(function(){
					$(this).removeClass("over");
				})
			});

[b]鼠标隔行换色效果的实现在与CSS部分：[/b]


.listView tr {
	     background-color:expression(this.rowIndex%2==0 ? "#F8F8F8":"#95bce2");
}

[b]完整HTML文件代码：[/b]


<html>
	<head>
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>   
		<style type="text/css">
			body {
				font-size: 10pt;
			}
			.listView th {
				font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				color: #4f6b72;
				border: 1px solid #97c8ff;
				letter-spacing: 2px;
				text-transform: uppercase;
				text-align: left;
				padding: 6px 11px;
				background: #b9e6fd  no-repeat;
			}
                        .listView tr {
			 background-color:expression(this.rowIndex%2==0 ? "#F8F8F8":"#95bce2");
			.listView td {
				border: 1px solid #97c8ff;
				font-size:12px;
				color: #4f6b72;
				padding: 6px 11px;   
				border-bottom: 1px solid #95bce2;   
			}     
			tr.over td {   
				background: #cccccc;
			}
		</style>
		<script>
			$(document).ready(function(){
				$("tr").mouseover(function(){
					$(this).addClass("over");
				}).mouseout(function(){
					$(this).removeClass("over");
				})
			});
		</script>
	</head>
	<body>   
		<table class="listView">   
				<thead>   
					<tr>   
						<th>   
							基金编号   
						</th>   
						<th>   
							基金名称   
						</th> 
						<th>   
							发行日期   
						</th>
						<th>   
							发行价   
						</th>
						<th>   
							基金类型   
						</th>
					</tr>   
				</thead>   
				<tr>   
					<td>003003</td>   
					<td>华夏现金增利</td>
					<td>2009-5-12</td>
					<td>2</td>
					<td>货币型</td>
				</tr>
				<tr>   
					<td>003003</td>   
					<td>华夏现金增利</td>
					<td>2009-5-12</td>
					<td>2</td>
					<td>货币型</td>
				</tr>
				<tr>   
					<td>003003</td>   
					<td>华夏现金增利</td>
					<td>2009-5-12</td>
					<td>2</td>
					<td>货币型</td>
				</tr>
				<tr>   
					<td>003003</td>   
					<td>华夏现金增利</td>
					<td>2009-5-12</td>
					<td>2</td>
					<td>货币型</td>
				</tr>
				<tr>   
					<td>003003</td>   
					<td>华夏现金增利</td>
					<td>2009-5-12</td>
					<td>2</td>
					<td>货币型</td>
				</tr>
		</table>   
	</body>
</head>

easinchu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单实用的基于jQuery的表格样式（隔行换色+鼠标经过高亮）

[b]希望各位高手高抬贵手，对于你们来说确实是简单的效果，请不要见怪。。。大牛们就掠过吧！ [/b] 最近在搞项目的时候经常涉及到页面表格数据的显示，满屏幕的数据给用户寻找某一行带来了视觉上的挑战，小弟我也是jQuery的初学者，结合网上的资料编写了简单的效果，感觉还蛮使用的，发出来大家分享下：[b]鼠标经过高亮效果截图：[/b][img]http://dl.iteye...
复制链接

扫一扫

专栏目录