案例-表格全选、表单检验

 案例-表格全选

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格全选</title>
  <style>
    table{
        /*边框1,实线*/
        border: 1px solid;
        /*宽500*/
        width: 500px;
        /*左移30*/
        margin-left: 30%;
    }

    td,th{
        /*居中*/
        text-align: center;
        /*边框1，实线*/
        border: 1px solid;
    }
    div{
        /*上移10*/
        margin-top: 10px;
        /*左移30*/
        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盒子-->
<div>
<!--  全选按钮-->
  <input type="button" id="selectAll" value="全选">
<!--  全不选按钮-->
  <input type="button" id="unSelectAll" value="全不选">
<!--  反选按钮-->
  <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
复制代码

 

 案例-表单检验

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <style>
    *{
      /*元素外边距*/
        margin: 0px;

      /*元素内边距*/
        padding: 0px;

      /*盒子大小*/
        box-sizing: border-box;
    }

    /*背景图片 居中，一整张*/
    body{
        background: url("img/register_bg.png") no-repeat center;

      /*上 外边距*/
        padding-top: 25px;
    }

    .rg_layout{
      /*宽900*/
        width: 900px;
      /*高500*/
        height: 500px;
      /*边框8，实线，白色*/
        border: 8px solid #EEEEEE;
      /*背景色 白色*/
        background-color: white;
      /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
      /*边框1 实线，红色*/
      /*border: 1px solid red;*/

      /*左浮动*/
        float: left;

      /*外边距 15*/
        margin: 15px;
    }

    .rg_left > p:first-child{
      /*颜色 黄色*/
        color:#FFD026;
      /*字体大小*/
        font-size: 20px;
    }

    .rg_left > p:last-child{
      /*颜色 灰色*/
        color:#A6A6A6;
      /*字体大小*/
        font-size: 20px;

    }


    .rg_center{
        float: left;
      /* border: 1px solid red;*/

    }

    .rg_right{
      /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
      /*字体大小*/
        font-size: 15px;

    }
    .rg_right p a {
      /*颜色 粉色*/
        color:pink;
    }

    .td_left{
      /*宽100*/
        width: 100px;
        /*右边*/
        text-align: right;
        /*高45*/
        height: 45px;
    }
    .td_right{
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        /*宽251*/
        width: 251px;

        height: 32px;
        border: 1px solid #A6A6A6 ;
      /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
      width: 110px;
    }

    #img_check{
      height: 32px;
      vertical-align: middle;
    }

    #btn_sub{
      width: 150px;
      height: 40px;
      background-color: #FFD026;
      border: 1px solid #FFD026 ;
    }
    .error{
      color:red;
    }
    #td_sub{
      padding-left: 150px;
    }

  </style>
  <script>

    /*
        分析：
            1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
                如果都为true，则监听器方法返回true
                如果有一个为false，则监听器方法返回false

            2.定义一些方法分别校验各个表单项。
            3.给各个表单项绑定onblur事件。



     */

    window.onload = function(){
      //1.给表单绑定onsubmit事件
      document.getElementById("form").onsubmit = function(){
        //调用用户校验方法   chekUsername();
        //调用密码校验方法   chekPassword();
        //return checkUsername() && checkPassword();

        return checkUsername() && checkPassword();
      }

      //给用户名和密码框分别绑定离焦事件
      document.getElementById("username").onblur = checkUsername;
      document.getElementById("password").onblur = checkPassword;
    }

    //校验用户名
    function checkUsername(){
      //1.获取用户名的值
      var username = document.getElementById("username").value;
      //2.定义正则表达式
      var reg_username = /^\w{6,12}$/;
      //3.判断值是否符合正则的规则
      var flag = reg_username.test(username);
      //4.提示信息
      var s_username = document.getElementById("s_username");

      if(flag){
        //提示绿色对勾
        s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
      }else{
        //提示红色用户名有误
        s_username.innerHTML = "用户名格式有误";
      }
      return flag;
    }

    //校验密码
    function checkPassword(){
      //1.获取用户名的值
      var password = document.getElementById("password").value;
      //2.定义正则表达式
      var reg_password = /^\w{6,12}$/;
      //3.判断值是否符合正则的规则
      var flag = reg_password.test(password);
      //4.提示信息
      var s_password = document.getElementById("s_password");

      if(flag){
        //提示绿色对勾
        s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
      }else{
        //提示红色用户名有误
        s_password.innerHTML = "密码格式有误";
      }
      return flag;
    }



  </script>
</head>
<body>

<div class="rg_layout">
  <div class="rg_left">
    <p>新用户注册</p>
    <p>USER REGISTER</p>

  </div>

  <div class="rg_center">
    <div class="rg_form">
      <!--定义表单 form-->
      <form action="#" id="form" method="get">
        <table>
          <tr>
            <td class="td_left"><label for="username">用户名</label></td>
            <td class="td_right">
              <input type="text" name="username" id="username" placeholder="请输入用户名">
              <span id="s_username" class="error"></span>
            </td>
          </tr>

          <tr>
            <td class="td_left"><label for="password">密码</label></td>
            <td class="td_right">
              <input type="password" name="password" id="password" placeholder="请输入密码">
              <span id="s_password" class="error"></span>
            </td>
          </tr>

          <tr>
            <td class="td_left"><label for="email">Email</label></td>
            <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
          </tr>

          <tr>
            <td class="td_left"><label for="name">姓名</label></td>
            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
          </tr>

          <tr>
            <td class="td_left"><label for="tel">手机号</label></td>
            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
          </tr>

          <tr>
            <td class="td_left"><label>性别</label></td>
            <td class="td_right">
              <input type="radio" name="gender" value="male" checked> 男
              <input type="radio" name="gender" value="female"> 女
            </td>
          </tr>

          <tr>
            <td class="td_left"><label for="birthday">出生日期</label></td>
            <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
          </tr>

          <tr>
            <td class="td_left"><label for="checkcode" >验证码</label></td>
            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
              <img id="img_check" src="img/verify_code.jpg">
            </td>
          </tr>


          <tr>
            <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
          </tr>
        </table>

      </form>


    </div>

  </div>

  <div class="rg_right">
    <p>已有账号?<a href="#">立即登录</a></p>
  </div>


</div>


</body>
</html>
复制代码

 

posted @   漁夫  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
· 案例_动态表格-添加、删除
· CSS案例-注册页面
· 646 案例全选表格 and647 表单校验
· 事件_常见事件演示和案例5_表格全选
· 表格全选和表单检验案例
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示