当鼠标经过行时,清除所有行的变色效果,只给当前的行添加一个类.bg{background-color:blue}。这是“排他思想”:利用循环给所有元素清除样式,给当前元素设置样式,且步骤不能颠倒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse:collapse;
}
thead tr {
background-color: aquamarine;
}
thead tr th {
border-bottom: 1px solid red;
}
.bg {
background-color: blueviolet;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
<th>公布日期</th>
<th>资金规律</th>
</tr>
</thead>
<tbody>
<tr>
<td>032548</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>10.74</td>
<td>+0.047%</td>
<td>2019-01-11</td>
<td>708.224</td>
</tr>
<tr>
<td>032548</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>10.74</td>
<td>+0.047%</td>
<td>2019-01-11</td>
<td>708.224</td>
</tr>
<tr>
<td>032548</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>10.74</td>
<td>+0.047%</td>
<td>2019-01-11</td>
<td>708.224</td>
</tr>
<tr>
<td>032548</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>10.74</td>
<td>+0.047%</td>
<td>2019-01-11</td>
<td>708.224</td>
</tr>
</tbody>
</table>
<script>
var tr = document.querySelector("tbody").querySelectorAll("tr");
for(var i = 0;i<tr.length;i++){
tr[i].onmouseover = function(){
this.className = 'bg';
}
tr[i].onmouseout = function(){
this.className = '';
}
}
</script>
</body>
</html>