<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>表格隔行变色_jQuery控制实现鼠标悬停高亮</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
//通过jQuery控制表格隔行换色，并鼠标悬停变色
$('tr:even:gt(0)').addClass('tr_even'); //默认偶数行背景色，无视标题行用:gt(0)
$('tr:odd').addClass('tr_odd'); //默认奇数数行背景色
$('tr:gt(0)').mouseover(function(){
$(this).addClass('tr_hover'); //通过jQuery控制实现鼠标悬停上的背景色，无视标题行用:gt(0)
}).mouseout(function(){
$(this).removeClass('tr_hover'); //通过jQuery控制实现鼠标悬停上的背景色
});
////////////////////////////////////////////////////////////////
});
</script>
<style type="text/css">
.headCls{background-color:#ccc;} /* 标题背景色 */
.tr_even{background-color:#EBF8FF} /* 偶数行背景色 */
.tr_odd{background-color:#DDECF3} /* 奇数行背景色 */
.tr_hover{background-color:#ffffcc} /* 鼠标悬停上的背景色 */
</style>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr class="headCls">
<th>jQuery控制实现鼠标悬停高亮</th>
<th>jQuery控制实现鼠标悬停高亮</th>
</tr>
<tr>
<td>data1_1</td>
<td>data1_2</td>
</tr>
<tr>
<td>data2_1</td>
<td>data2_2</td>
</tr>
<tr>
<td>data3_1</td>
<td>data3_2</td>
</tr>
<tr>
<td>data4_1</td>
<td>data4_2</td>
</tr>
<tr>
<td>data5_1</td>
<td>data5_2</td>
</tr>
</table>
</body>
</html>
浙公网安备 33010602011771号