鼠标点击、经过，离开案例

    <table>
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <!-- 表格body -->
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>
    
    
    
    
    <script>
        var tbody = document.querySelector('tbody');

        var trs = document.querySelectorAll('tr');
 
            
            
         1、下一次经过、点击前清除所有颜色型>>
            <!--通过添加类名来改颜色-->
     for (var i = 1; i < trs.length; i++) {
            trs[i].onmouseover = function () {
            
            
                for (i = 1; i < trs.length; i++) {
                    trs[i].className = '';
                }
                 <!--为了使之前经过的tr去掉颜色在下一次经过、点击前进行所有tr消色   
            缺点：如果不进行下一次经过、点击，上次产生的颜色就不会消除-->
                
                
                this.className = 'pink';
            }
        }
        
        
        2、鼠标离开即失去鼠标经过功能型>>
        
          for (var i = 1; i < trs.length; i++) {
            trs[i].onmouseover = function () {
            <!--鼠标经过时变色-->
                this.className = 'pink';
            }

            trs[i].onmouseout = function () {
           <!--鼠标离开时恢复-->
                this.className = '';
            }


        }

    </script>
    ```