-
-10 14
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".color").find("tr").each(function(i){this.style.backgroundColor=['#eee','#fff'][i%2]})//一行为白色，一行为灰色
$(".color").find("tr").mouseover(function(){
$(this).css("backgroundColor","#6699CC");
});
$(".color").find("tr").mouseout(function(){
$("tr:even").css("backgroundColor","#fff"); //偶数行的颜色
$("tr:odd").css("backgroundColor","#eee"); //奇数行的颜色
});
});
</script>
</head>
<body>
<div id="results">11</div>
<div id="results2">23</div><table width="200" border="0" cellspacing="1" bgcolor="#eeeeee" class="color">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></body>
</html>本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/jquery-gehanghuanse.html
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
- 评论(0)
发表评论 TrackBack