js事件委托案例（ table tr(5*5) 移入移出背景变色（pink）+ 每行的第三列移入移出背景变色（green））

最新推荐文章于 2024-05-26 07:19:47 发布

Hermia_yuan

最新推荐文章于 2024-05-26 07:19:47 发布

阅读量255

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Hermia_yuan/article/details/124088085

版权

<script>
      //2、委托案例（ table tr(5*5) 移入移出背景变色（pink）+  每行的第三列移入移出背景变色（green）  ） 

      document.getElementsByTagName("table")[0].onmouseover = function(e){

        console.log(e.target)
        if(e.target.parentNode.nodeName == "TR"){          //parentNode 寻找tr父节点
            e.target.parentNode.style.background = "pink"
        }
        if(e.target.nodeName == "TD" && e.target.cellIndex == 2){
                e.target.style.background= "green"
            }
            console.log(e);
      }


      document.getElementsByTagName("table")[0].onmouseout = function(e){

        console.log(e)
        if(e.target.parentNode.nodeName == "TR"){
            e.target.parentNode.style.background = ""
        }
        console.log(e);
        if(e.target.nodeName == "TD" && e.target.cellIndex == 2){
                e.target.style.background= ""
            }
      }




</script>