jquery table的隔行变色 鼠标事件

一、鼠标事件

  mouseover(function(){}); 鼠标移动到目标事件

  mouseout(function(){}); 鼠标离开目标的事件

二、具体应用代码

<body>
<h3>Books Info:</h3>
<table id="table">
<tr>
<td>书名</td>
<td>价格</td>
<td>描述</td>
</tr>
<tr>
<td>《海的女儿》</td>
<td>11.00</td>
<td>悬崖上的金鱼姬,海里的女儿</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function(){
$("#table").find("tbody>tr:even") //偶数行的操作
.mouseover(function(){
$(this).css("background-color","#9AAAC7");
}).mouseout(function(){
$(this).css("background-color","#f9f9f9");
}).end()
.find("tbody>tr:odd") //奇数行的操作
.mouseover(function(){
$(this).css("background-color","#9AAAC7");
}).mouseout(function(){
$(this).css("background-color","#e5e9f0");
});
});
//注:在jQuery中,执行完mouseover或者mouseout等方法之后,都会返回当前的对象,所以可以进行链式操作 
</script>
上一篇:七牛云存储Python SDK使用教程 - 上传策略详解


下一篇:Js 中json简单处理