排他思想_js排他思想:鼠标表格行经过时背景变色-CSDN博客

本文链接：https://blog.csdn.net/m0_61700036/article/details/121535758

1、排他算法思想

2、按钮切换

3、鼠标经过单元格变化

1、排他算法思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

案例演示：在同一组元素中，想要某一个元素实现某种样式，使用循环的排他思想算法来实现。

2、按钮切换

//编写HTML结构代码

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
</body>

//编写JS代码，单击按钮，改变当前按钮背景色
<script>
  // 1. 获取所有按钮元素， btns得到的是类数组对象
  var btns = document.getElementsByTagName('button');
  for (var i = 0; i < btns.length; i++) { // 里面的每一个元素btns[i]
     btns[i].onclick = function () {
      for (var i = 0; i < btns.length; i++) { // (1) 先把所有的按钮背景颜色去掉
        btns[i].style.backgroundColor = '';
      }
      this.style.backgroundColor = 'pink'; // (2) 然后设置当前的元素背景颜色
    }
  }

展示效果：

案例分析：当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。

接下来，使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。

3、鼠标经过单元格变化

① 用到新的鼠标事件鼠标经过 onmouseover 鼠标离开 onmouseout

② 核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色

③ 注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行

//编写HTML结构代码

<div style="margin: 50px auto;">
    <table border="1">
        <thead>
            <tr>
                <th width='50'>学号</th>
                <th width='50'>姓名</th>
                <th width='50'>性别</th>
                <th width='50'>年龄</th>
                <th width='50'>地址</th>

                
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1001</td>
            <td>张三</td>
            <td>男</td>
            <td>26</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>里斯</td>
            <td>女</td>
            <td>30</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>刘柳</td>
            <td>女</td>
            <td>26</td>
            <td>上海</td>
        </tr>
    </tbody>
    </table>
</div>

 //编写JS代码，鼠标指针经过时背景变色
//1.获取tbody里所有tr
    var trs=document.querySelector('tbody').querySelectorAll('tr');
   
    //2.利用循环绑定事件
    for(var i=0;i<trs.length;i++){
        trs[i].onmouseover=function(){
            this.className='bg';   //鼠标经过，class名为bg
        }
        trs[i].onmouseout=function(){
            this.className='';
        }
    }

效果如下：