案例：表格鼠标经过变色 / 全选反选

最新推荐文章于 2022-11-17 20:39:02 发布

httpkaidi

最新推荐文章于 2022-11-17 20:39:02 发布

阅读量360

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121616296

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

案例一：表格鼠标经过变色

案例：用到鼠标事件：鼠标经过 onmouseover 鼠标离开 onmouseout
思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色
//注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行

<style>
      table {
        width: 800px;
        margin: 100px auto;
        text-align: center;
        border-collapse: collapse;
        font-size: 24px;
      }
      thead tr {
        height: 30px;
        background-color: rgb(101, 226, 226);
      }
      tbody tr {
        height: 30px;
      }
      tbody td {
        border-bottom: 1px solid rgb(248, 246, 246);
        font-style: 12px;
        color: violet;
      }
      .bg {
        background-color: rgb(228, 120, 19);
      }
    </style>
  </head>
  <body>
    <!--案例：用到鼠标事件：鼠标经过 onmouseover 鼠标离开 onmouseout
        思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色
        //注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行-->
    <table>
      <thead>
        <tr>
          <th>代码</th>
          <th>名称</th>
          <th>最新公布净值</th>
          <th>累计净值</th>
          <th>前单位净值</th>
          <th>净值增长率</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>003526</td>
          <td>003526</td>
          <td>003526</td>
          <td>003526</td>
          <td>003526</td>
          <td>003526</td>
        </tr>
        <!--重复tr td  此处略-->
      </tbody>
    </table>
    <script>
      var trs = document.querySelector("tbody").querySelectorAll("tr");
      for (var i = 0; i < trs.length; i++) {
        //鼠标经过事件
        trs[i].onmousemove = function () {
          this.className = "bg";
        };
        //鼠标离开事件
        trs[i].onmouseout = function () {
          this.className = "";
        };
      }
    </script>
  </body>

案例二：全选反选
案例分析：

全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
（ this.checked 可以得到当前复选框的选中状态，如果是true 就是选中，如果是false，就是未选中）
下面复选框需要全部选中，上面全选按钮才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有复选框是否有未选中的，如果有一个未选中的，上面的全选就不选中
（可以设置一个变量来控制全选是否选中）

<style>
      table {
        width: 400px;
        margin: 100px auto;
        text-align: center;
        border-collapse: collapse;
        font-size: 14px;
      }
      thead tr {
        height: 40px;
        background-color: rgb(101, 226, 226);
      }
      thead th {
        border-right: 1px solid rgb(207, 199, 199);
      }
      tbody tr {
        height: 30px;
      }
      tbody td {
        border-bottom: 1px solid rgb(207, 199, 199);
        border-right: 1px solid rgb(207, 199, 199);
        font-style: 10px;
        color: rgb(29, 28, 29);
      }

      input {
        width: 16px;
        height: 16px;
        text-align: center;
      }
    </style>
    
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="j_cbAll" /></th>
          <th>商品</th>
          <th>价钱</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td><input type="checkbox" /></td>
          <td>iphone8</td>
          <td>8000</td>
        </tr>
        <!--重复tr td  此处略-->
      </tbody>
    </table>
    
    <script>
      var j_cbAll = document.getElementById("j_cbAll"); //全选按钮
      var j_tbs = document.getElementById("j_tb").getElementsByTagName("input"); //下面的所有复选框
      //1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
      j_cbAll.onclick = function () {
        //this.checked 可以得到当前复选框的选中状态，如果是true 就是选中，如果是false，就是未选中
        for (var i = 0; i < j_tbs.length; i++) {
          j_tbs[i].checked = this.checked;
        }
      };
      //2. 下面复选框需要全部选中，上面全选按钮才能选中做法：
      //给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有复选框是否有未选中的
      //如果有一个未选中的，上面的全选就不选中
      //可以设置一个变量来控制全选是否选中
      for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function () {
          //flag控制全选按钮是否被选中
          var flag = true;
          //每次点击下面的复选框都要循环检查这4个按钮是否全部被选中
          for (var i = 0; i < j_tbs.length; i++) {
            if (!j_tbs[i].checked) {
              flag = false; //如果下面的按钮有没有选中的，上面的全选按钮就不选择
              break; //退出for循环，提高执行效率，因为只要有一个未选中，剩下的就不用循环判断了
            }
          }
          j_cbAll.checked = flag; //最后，让上面的全选按钮的结果等于flag
        };
      }
    </script>
  </body>

httpkaidi

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
案例：表格鼠标经过变色 / 全选反选

案例一：表格鼠标经过变色案例：用到鼠标事件：鼠标经过 onmouseover 鼠标离开 onmouseout思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色//注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行<style> table { width: 800px; margin: 100px auto; text-align: center; bord
复制链接

扫一扫

专栏目录