鼠标滑过当前行背景变色效果
鼠标滑过当前行背景变色效果属于前端实例代码，有关更多实例代码大家可以查看。
表格数据量大的话，对行的分辨可能会有一些困难，也容易出现失误，所以为了应对这种情况，很多表格都会使用隔行变色或者鼠标悬浮当前行背景变色的效果，下面通过代码介绍一下如何实现此效果。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
function changeTrColor(obj){
var _tbody=obj.parentNode;
for (var index=0;index<_tbody.rows.length;index++){
_tbody.rows[index].style.backgroundColor="";
}
obj.style.backgroundColor="blue";
}
window.onload=function(){
var otable = document.getElementById("ant");
var trs = otable.rows;
for (var index = 0; index < trs.length; index++) {
trs[index].onmouseover=function(){changeTrColor(this)}
}
}
</script>
</head>
<body>
<table id="ant" align="center" border="1" cellspacing="1">
<tr>
<td align="center">前端教程网一</td>
<td height="20">前端教程网二</td>
<td height="20">前端教程网三</td>
<td height="20">前端教程网四</td>
<td height="20">前端教程网五</td>
</tr>
<tr>
<td align="center">前端教程网一</td>
<td height="20">前端教程网二</td>
<td height="20">前端教程网三</td>
<td height="20">前端教程网四</td>
<td height="20">前端教程网五</td>
</tr>
<tr>
<td align="center">前端教程网一</td>
<td height="20">前端教程网二</td>
<td height="20">前端教程网三</td>
<td height="20">前端教程网四</td>
<td height="20">前端教程网五</td>
</tr>
</table>
</body>
</html>
当鼠标悬浮于行上的时候，能够实现当前行背景变色效果，下面介绍一下实现过程。
一.代码注释:
（1）.function changeTrColor(obj){}，此函数实现当前行背景变色，obj参数是当前行对象。
（2）.var _tbody=obj.parentNode，获取当前节点的父节点，也就是tbody节点，可能很多朋友会认为这里哪有tbody节点，其实在js操作过程中会自动添加tbody节点。
（3）.for (var index=0;index<_tbody.rows.length;index++){_tbody.rows[index].style.backgroundColor="";}，遍历所有的tr元素对象，并清除每一个tr元素的背景暗色。
（4）.obj.style.backgroundColor="blue"，将当前tr的背景色设置为蓝色。
（5）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（6）.var otable = document.getElementById("ant")，获取表格对象。
（7）.var trs = otable.rows，获取所有的tr元素集合。
（8）.for(var index=0;index<trs.length;index++){trs[index].onmouseover=function(){changeTrColor(this)}}，为每一个tr元素注册onmouseover事件处理函数。
二.相关阅读:
（1）.parentNode属性参阅javascript parentNode一章节。
（2）.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（3）.onmouseover事件参阅javascript mouseover 事件一章节。
（4）.this参阅javascript this一章节。
（5）.rows属性参阅JavaScript rows 属性一章节。
鼠标滑过当前行背景变色效果，这样的场景在实际项目中还是用的比较多的，关于鼠标滑过当前行背景变色效果就介绍到这了。