2.实现当鼠标在某一表格行,该行变色,鼠标离开时恢复原色。(利用onmouseover和onmouseout事件)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table class="table" style="border: 2px solid red;width: 500px;height: 300px;" onmouseover="overfun()"
onmouseout="outfun()">
<tbody class="tdata" <tr id="1row" onmouseover="this.backgroundColor('red')">
<th scope="row">1</th>
<td>@mdo</td>
</tr>
<tr id="2row">
<th scope="row">2</th>
<td>@fat</td>
</tr>
<tr id="3row">
<th scope="row">3</th>
<td>@twitter</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var tr = document.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
tr[i].onmouseover = function(){
for (var j = 0; j < tr.length; j++) {
tr[j].style.background = "#000";
tr[j].style.color = "#333";
}
this.style.background = "#4455";
this.style.color = "#321";
}
tr[i].onmouseout = function(){
this.style.background = "#000";
this.style.color = "#333";
}
}
</script>
</body>
</html>