//-------------------处理隔行变色------------
/*
jquery实现表格的隔行变色思路:
1)获取所有的tr
2)遍历tr
3)处理当鼠标移动到上面的时候获得颜色,当离开的时候恢复颜色
*/
$("tr").each(function(index,domEle){
if(index%2==0){
$(domEle).css("background","#ffff99");
}else{
$(domEle).css("background","#cccccc");
}
}).hover(function(){
//当鼠标移动到上方的时候,先获取原来的颜色
oldcolor=$(this).css("background-color");
$(this).css("background-color","green");
},function(){
$(this).css("background",oldcolor);
});
});
</script>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<input id="btn0" type="button" value="清空样式">
</div>
<table width="600" border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>扣扣</td>
</tr>
<tr>
<td>妮妮</td>
<td>男</td>
<td>22</td>
<td>12345678901</td>
<td>098765543</td>
</tr>
<tr>
<td>妮妮</td>
<td>男</td>
<td>22</td>
<td>12345678901</td>
<td>098765543</td>
</tr>
<tr>
<td>妮妮</td>
<td>男</td>
<td>22</td>
<td>12345678901</td>
<td>098765543</td>
</tr>
<tr>
<td>妮妮</td>
<td>男</td>
<td>22</td>
<td>12345678901</td>
<td>098765543</td>
</tr>
<tr>
<td>妮妮</td>
<td>男</td>
<td>22</td>
<td>12345678901</td>
<td>098765543</td>
</tr>
</table>
</body>
</html>