（10）行颜色间隔显示并高亮：鼠标事件onmouseover、onmouseout

最新推荐文章于 2023-11-14 21:19:11 发布

FixedStarHaHa

最新推荐文章于 2023-11-14 21:19:11 发布

阅读量432

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76856334

版权

DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

重点：鼠标事件、name全局变量的理解

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
    .one
    {
        background-color:#C9C;

    }
    .two
    {
        background-color:#CF9;
    }
    .on
    {
        background-color:#03F;
    }

</style>

<script type="text/javascript">
    function trColor()
    {
        //首先获取表格对象
        var TabNode=document.getElementById("Tabid");

         var TrNodes=TabNode.rows;

        //获取所有备操作的行对象
        for(var i=1;i<TrNodes.length;i++)
        {
            if(i%2==0)
            {
                TrNodes[i].className="one";
            }
            else
            {
                TrNodes[i].className="two";
            }



        }   
    }
    //trColor();注意不能这样写，因为table还没有加载进来，所以TabNode=null,出现脚本错误
    //可以这样解决，用onload方法，在浏览器完成对象的装载后(即body的数据都装载完)立刻触发
    onload=function ()
    {
        trColor();


    }
    var name;//用于记录当鼠标悬浮在此行时的className,当离开此行时，就可以直接用此行的类名颜色，不用循环去找了
    function over(node)
    {
        name=node.className;
        node.className="on";

    }

    function out(node)
    {
        node.className=name;
    }

</script>
</head>







<body>

<table id="Tabid">
        <tr >
           <th>姓名</th>
           <th>年龄</th>
           <th>地址</th>
         </tr >
         <!--定义两个事件源，一个是鼠标悬停，一个是鼠标掠过-->
          <tr  onmouseover="over(this)" onmouseout="out(this)">
           <td>张三</td>
           <td>20</td>
           <td>北京</td>
         </tr>

          <tr  onmouseover="over(this)" onmouseout="out(this)" >
           <td>李四</td>
           <td>34</td>
           <td>南京</td>
         </tr>

         <tr onmouseover="over(this)" onmouseout="out(this)" >
           <td>王五</td>
           <td>45</td>
           <td>上海</td>
         </tr>

         <tr  onmouseover="over(this)" onmouseout="out(this)">
           <td>赵六</td>
           <td>35</td>
           <td>大连</td>
         </tr>
       </table>   
</body>
</html>