zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    14.3.3.2 Configuring the Rate of InnoDB Buffer Pool Flushing 配置 InnoDB Buffer Pool 刷新频率
    14.3.3 InnoDB Buffer Pool Configuration InnoDB Buffer Pool 配置:
    Perl 中的对象
    MyCat不支持的SQL语句
    第6章 模块
    Linux_RAID
    mysql limit
    svn 备份和恢复
    农商行信息化建设过程中存在哪些问题?
    14.2.6.4 Physical Structure of an InnoDB Index InnoDB Index 物理结构
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12593936.html
Copyright © 2011-2022 走看看