高亮的行/列是用户界面设计中一个经典的元素,他可以使得用户不会对错行,尤其在一些没有边框和比较长的表格中。
下面给出一个简单的实现。
同理,双色表格(表格按照奇数偶数不同颜色)也会让用户体验提升不少。
<!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>