day16--Dom鼠标操作

1、有一个表格，当鼠标移动到某行时，该行变红，移除时，变为白色

<body> 
        <table border="1" width="300px">
            <tr onmouseover="t1(0);" onmouseout="t2(0);">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr onmouseover="t1(1);" onmouseout="t2(1);">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr onmouseover="t1(2);" onmouseout="t2(2);">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
        <script>
            function t1(n){
                var myTrs=document.getElementsByTagName("tr")[n];
                //console.log(myTrs);
                myTrs.style.backgroundColor="red";
            }
            function t2(n){
                var myTrs=document.getElementsByTagName("tr")[n];
                myTrs.style.backgroundColor="white";
            }
        </script>
    </body>

 该示例当鼠标移动到某一行时，改行变为红色，移开改行变为白色；

以上代码需要将每行都进行绑定，即需要将每个tr标签进行绑定，如果tr标签太多的话，该方法可能不适用；我们可以通过以下方式来实现：

          <table border="1" width="300px">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
        <script>
            var myTrs=document.getElementsByTagName("tr");
            var len=myTrs.length;
            for(var i=0;i<len;i++){
                myTrs[i].onmouseover=function(){
                    this.style.backgroundColor="red";
                    // myTrs[i].style.backgroundColor="red";这种写法不可以
                    //谁调用该函数，this就指向谁
                }
                myTrs[i].onmouseout=function(){
                    this.style.backgroundColor="";
                    //谁调用该函数，this就指向谁
                }
            }            
        </script>

这种方式简化了一点代码；执行结果是一样的

posted @ 2020-03-29 18:36  凸凸yolotheway  阅读(158)  评论(0)    收藏  举报