<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
//导入jquery库文件~！
<. type="text/." src="../JS/jquery.js"></.>
<. language =. >
//html载入完毕后运行$(document).ready()
$(".csstab tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");})
$(".csstab tr:even").addClass("alt");
});
</.>
<style type ="text/css" >
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
cursor:pointer;
}
</style>
</head>
<body>
<h1>
用jquery实现双色表格，鼠标移动到上面时，行变色~！</h1>
<form id="form1" runat="server">
<div>
<table width =400 class ="csstab" cellspacing =0>
<thead>
<tr>
<th>
姓名</th>
<th>
年龄</th>
<th>
性别</th>
<th>
QQ</th>
</tr>
</thead>
<tbody>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作
