jquery动态添加样式问题

Question

我想给table的每行数据动态添加样式，在鼠标放在某一行时，该行高亮显示。代码如下var trs = $("#table1").find("tr:not(:first)");
for(var i=0;i<trs.length;i++){
var tr = $(trs[i]);
tr.mouseover(function(){
    tr.addClass("selected");
});
tr.mouseout(function(){
    tr.removeClass("selected");
});
}
现在问题是不管鼠标放在哪一行，都会给最后一行添加样式，迷惑，请指教一下

Answer 1

涉及闭包问题，循环完毕后tr就是最后一个tr，用this对象就行了，也不需要循环$("#table1").find("tr:not(:first)").mouseover(function(){
    $(this).addClass("selected");
}).mouseout(function(){
   $(this).removeClass("selected");
});

Answer 2

<style>
.selected{background-color:yellow}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("table tr:not(:first)").hover(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
})
</script>
 <table>
     <tr>
     <td>学生姓名</td>
     <td>学生成绩</td>
     <td>有效<input type="checkbox"  id="yesheader" /></td>
     <td>无效<input type="checkbox"  id="noheader" /></td>
     </tr>
     <tr>
     <td>王</td>
     <td>80</td>
     <td><input type="checkbox" value="0" name="yes_1"  /></td>
     <td><input type="checkbox" value="1" name="no_1"  /></td>
     </tr>
     <tr>
     <td>张</td>
     <td>90</td>
     <td><input type="checkbox" value="0" disabled="true" name="yes_2"/></td>
     <td><input type="checkbox" value="1" name="no_2"  /></td>
     
     </tr>
     <tr>
     <td>李</td>
     <td>80</td>
     <td><input type="checkbox" value="0" name="yes_3"/></td>
     <td><input type="checkbox" value="1" name="no_3"  /></td>
     </tr>
     </table>