js实现鼠标移动到表格，改变所在行背景色

js初学，慕课网一个小编程练习，上网查了一下，把方法写出来！

HTML表格如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1" width="50%" id="table">
       <tr>
          <th>学号</th><th>姓名</th><th>操作</th>
       </tr>  
       <tr>
          <td>xh001</td><td>王小明</td><td><a href="#" >删除</a></td>;
       </tr>
        <tr>
          <td>xh002</td><td>刘小芳</td><td><a href="#">删除</a></td>  
       </tr>  
</body>
</html>

接下来开始写功能的实现，功能实现的基本思路如下：

1.获取表格每一行对应的元素对象；

2.响应每个元素的鼠标经过事件onmouseover和鼠标离开事件onmouseout

3.通过修改object.style.property设置经过和离开时的背景颜色

具体实现如下：

<script  type="text/javascript">
    window.onload = function(){          //加载页面设置属性
         var tab=document.getElementsByTagName("tr");
            for(var i=1;i<tab.length;i++) //用for循环来给每一行元素响应事件
               {
                    changeBgColor(tab[i]);
                }
    }
    function changeBgColor(object){
         object.onmouseover=function(){
               object.style.backgroundColor="#ffff00";   
              }
               object.onmouseout=function(){
                   object.style.backgroundColor="#fff";     //原来的背景色为白色
              }
       }
    </script>

另外还可以通过setAttribute()设置属性来响应事件

 <script type="text/javascript"> 
  
      window.onload = function(){
          var str_tr=document.getElementsByTagName('tr');
       for(var i=0;i<str_tr.length;i++){
           str_tr[i].setAttribute('onmouseover','javascript:this.style.background="#ffff00"');
           str_tr[i].setAttribute('onmouseout','javascript:this.style.background="#fff"');
       }
     }
</script>

鼠标移动到表格行上

js实现鼠标移动到表格，改变所在行背景色

鼠标离开后

js实现鼠标移动到表格，改变所在行背景色

秒客网

js实现鼠标移动到表格，改变所在行背景色

相关文章