JS中的排他思想

排他思想：

              1.先在一开始就清除样式（先排除其他人，包括自己）
              2.再设置当前的样式（再设置自己）

案例：表格换行变色

**CSS代码：**
<style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            /* 边框合并 */
            border-collapse: collapse;
            width: 400px;
            line-height: 30px;
            text-align: center;
            color: black;
        }
        th {
            color: orange;
            background-color: greenyellow;
        }

        table, th, td {
            border: 1px solid #666;
        }
        .targetColor {
            background-color: rgb(197, 236, 236);
        }
    </style>
    
**html代码**

 <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>员工号码</th>&nbsp;
                        <th>员工姓名</th>&nbsp;
                        <th>员工性别</th>&nbsp;
                        <th>员工工龄（年）</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1001</td>
                        <td>李强</td>
                        <td>男</td>
                        <td>3</td>
                    </tr>

                    <tr>
                        <td>1002</td>
                        <td>李华</td>
                        <td>女</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>2001</td>
                        <td>王强</td>
                        <td>男</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>3001</td>
                        <td>李样强</td>
                        <td>男</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>

        </div>
        
**JS代码：**
 <script>
            //找到页面中的tr元素，得到的是一个类集合，NodeList
            var trEle = document.querySelector("tbody").querySelectorAll("tr");
            for (var i = 0; i < trEle.length; i++) {
                //通过循环找到每一行
                trEle[i].addEventListener("mouseover", function (e) {
                    for (var i = 0; i < trEle.length; i++) {
                        //采用排他思想的第一步：清除样式（包括自己）
                        trEle[i].className = "";
                    }
                    //排他思想第二步：设置当前鼠标所在行背景颜色，以便用户浏览数据更醒目
                    this.className = "targetColor";
                })
            }
        </script>

效果图：