黑马程序员技术交流社区

标题: Javascript [打印本页]

作者: 826278117 时间: 2019-6-6 14:58
标题: Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
      table{
         border: 1px solid;
         width: 500px;
         margin-left: 30%;
      }

      td,th{
         text-align: center;
         border: 1px solid;
      }
      div{
         margin-top: 10px;
         margin-left: 30%;
      }

      .out{
         background-color: white;
      }
      .over{
         background-color: pink;
      }
</style>

  <script>
   /*
      分析：
         1.全选：
            * 获取所有的checkbox
            * 遍历cb，设置每一个cb的状态为选中  checked

   */

   //1.在页面加载完后绑定事件
   window.onload = function(){
      //2.给全选按钮绑定单击事件
      document.getElementById("selectAll").onclick = function(){
            //全选
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //2.遍历
               for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为选中  checked
                  cbs[i].checked = true;
               }
      }

      document.getElementById("unSelectAll").onclick = function(){
            //全不选
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
               //3.设置每一个cb的状态为未选中  checked
               cbs[i].checked = false;
            }
      }

      document.getElementById("selectRev").onclick = function(){
            //反选
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
               //3.设置每一个cb的状态为相反
               cbs[i].checked = !cbs[i].checked;
            }
      }

      document.getElementById("firstCb").onclick = function(){
            //第一个cb点击
            //1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            //获取第一个cb

            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
               //3.设置每一个cb的状态和第一个cb的状态一样
               cbs[i].checked =  this.checked;
            }
      }

      //给所有tr绑定鼠标移到元素之上和移出元素事件
      var trs = document.getElementsByTagName("tr");
      //2.遍历
      for (var i = 0; i < trs.length; i++) {
            //移到元素之上
            trs[i].onmouseover = function(){
                  this.className = "over";
            }

            //移出元素
            trs[i].onmouseout = function(){
                  this.className = "out";
            }

      }

   }

  </script>

</head>
<body>

<table>
<caption>学生信息表</caption>
<tr>
      <th><input type="checkbox" name="cb" id="firstCb"></th>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
</tr>

<tr>
      <td><input type="checkbox"  name="cb" ></td>
      <td>1</td>
      <td>令狐冲</td>
      <td>男</td>
      <td><a href="javascript:void(0);">删除</a></td>
</tr>

<tr>
      <td><input type="checkbox"  name="cb" ></td>
      <td>2</td>
      <td>任我行</td>
      <td>男</td>
      <td><a href="javascript:void(0);">删除</a></td>
</tr>

<tr>
      <td><input type="checkbox"  name="cb" ></td>
      <td>3</td>
      <td>岳不群</td>
      <td>?</td>
      <td><a href="javascript:void(0);">删除</a></td>
</tr>

</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2