<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.0.js"></script>
<script language="JavaScript" src="js/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color","aquamarine");
$("tr:odd").css("background-color","antiquewhite");
$("tr").hover(function(){
$(this).css("background-color","darksalmon");/*鼠标停在表格上的事件*/
});
$("tr:even").mouseout(function(){/*鼠标离开偶数行上的事件*/
$(this).css("background-color","aquamarine");
});
$("tr:odd").mouseout(function(){/*鼠标离开奇数行上的事件*/
$(this).css("background-color","antiquewhite");
});
});
</script>
</head>
<body>
<table style="width: 200px;height: 100px;" align="center" border="1" cellspacing="0" cellpadding="0" id="mytable">
<tr>
<td>序号</td><td>名字</td>
</tr>
<tr>
<td>1</td><td>张三</td>
</tr>
<tr>
<td>2</td><td>李四</td>
</tr>
<tr>
<td>3</td><td>王五</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.0.js"></script>
<script language="JavaScript" src="js/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color","aquamarine");
$("tr:odd").css("background-color","antiquewhite");
$("tr").hover(function(){
$(this).css("background-color","darksalmon");/*鼠标停在表格上的事件*/
});
$("tr:even").mouseout(function(){/*鼠标离开偶数行上的事件*/
$(this).css("background-color","aquamarine");
});
$("tr:odd").mouseout(function(){/*鼠标离开奇数行上的事件*/
$(this).css("background-color","antiquewhite");
});
});
</script>
</head>
<body>
<table style="width: 200px;height: 100px;" align="center" border="1" cellspacing="0" cellpadding="0" id="mytable">
<tr>
<td>序号</td><td>名字</td>
</tr>
<tr>
<td>1</td><td>张三</td>
</tr>
<tr>
<td>2</td><td>李四</td>
</tr>
<tr>
<td>3</td><td>王五</td>
</tr>
</table>
</body>
</html>