高亮行/列

高亮行与双色表格设计

最新推荐文章于 2024-06-24 17:54:07 发布

最新推荐文章于 2024-06-24 17:54:07 发布 · 165 阅读

文章标签：

#jQuery #Ajax #JavaScript #HTML #ViewUI

web前端同时被 2 个专栏收录

13 篇文章

订阅专栏

openApi

13 篇文章

订阅专栏

本文介绍了一种在用户界面设计中提高用户体验的方法：通过高亮当前选中的行和使用双色表格来帮助用户更好地浏览数据。提供了一个简单的jQuery实现示例，当鼠标悬停在表格行上时，该行将被高亮显示。

高亮的行/列是用户界面设计中一个经典的元素，他可以使得用户不会对错行，尤其在一些没有边框和比较长的表格中。

下面给出一个简单的实现。

同理，双色表格（表格按照奇数偶数不同颜色）也会让用户体验提升不少。

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
.hightlight{
	background-color:#C0C0C0;
}
</style>
<script language="javascript">
$(document).ready(function(){
	$("tr").mouseover(function(){
		$(this).addClass("hightlight");
	}).mouseout(function(){
		$(this).removeClass("hightlight");
	})
});
</script>
</head>
<body style="background-color:#EFEFEF;">
<table>
<tr><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td></tr>
</table>
</body>
</html>