jQuery實現 滑鼠放在table哪一行 哪一行就變色,移開就恢復
參考別人寫出的,程式碼如下:
<style type="text/css">
.bgRed {
background-color: #b2dba1;
}
</style>
<script type="text/javascript">
$(function() {
$("tr").first().nextAll().mouseover(function() { //獲取標題行以外的所有tr,每一個都給個滑鼠懸浮事件
$(this).children().addClass("bgRed"); //將懸浮的位置新增css樣式
})
$("tr").first().nextAll().mouseleave(function() {//滑鼠移開
$(this).children().removeClass("bgRed")
})
})
</script>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="checkAll"> 序號</th>
<th>所屬機構</th>
<th>姓名</th>
<th>手機號碼</th>
</tr>
<tr>
<td><input type="checkbox" name="_dataCheckBox">1</td>
<td>山東</td>
<td>張三</td>
<td>15689547865</td>
</tr>
<tr>
<td><input type="checkbox" name="_dataCheckBox">1</td>
<td>山東</td>
<td>張三</td>
<td>15689547865</td>
</tr>
<tr>
<td><input type="checkbox" name="_dataCheckBox">1</td>
<td>山東</td>
<td>張三</td>
<td>15689547865</td>
</tr>
</table>
</body>