JavaScript综合题_javascript综合设计题-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56734546/article/details/122143325

本文介绍了一个使用HTML、CSS和JavaScript实现的前端用户管理表格，包括全选/反选功能、字段验证（姓名、密码、手机号等）以及省市联动选择。展示了如何添加新用户和修改用户信息，以及删除和编辑操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           table,tr,th,td{
               border: 1px solid black;
               border-collapse: collapse;
           }
           tr,th,td{

               height: 30px;
           }
           fieldset{
               width: 900px;

               margin: 5px auto;
           }
           span{
               color: red;
           }
           table th{
               background-color: greenyellow;
           }
           table{
               padding: 3px 5px;
               width: 900px;
               height: 400px;
               margin: 5px auto;
           }
       </style>
   </head>
   <body>

           <table >
           <tr>
               <th><input type="checkbox" id="ChageAll"/>全选<input type="checkbox" id="ChageA"/>反选</th>
               <th>姓名</th>
               <th>性别</th>
               <th>科目</th>
               <th>密码</th>
               <th>手机号</th>
               <th>邮箱</th>
               <th>城市</th>
               <th>操作</th>
           </tr>
           <tr>
               <td><input type="checkbox" class="cheA"/></td>
               <td>张三</td>
               <td>男</td>
               <td>化学，英语</td>
               <td>123456</td>
               <td>13238674929</td>
               <td>2045219107@qq.com</td>
               <td>云南省保山市</td>
               <td><a href="#" οnclick="del(this)">删除</a>  <a href="#" οnclick="delial(this)">编辑</a></td>
           </tr>
           <tr>
               <td><input type="checkbox" class="cheA"/></td>
               <td>张三1</td>
               <td>男</td>
               <td>化学，英语</td>
               <td>123456</td>
               <td>13238674929</td>
               <td>2045219107@qq.com</td>
               <td>云南省保山市</td>
               <td><a href="#" οnclick="del(this)">删除</a>  <a href="#" οnclick="delial(this)">编辑</a></td>
           </tr>
           <tr>
               <td><input type="checkbox" class="cheA"/></td>
               <td>张三2</td>
               <td>男</td>
               <td>化学，英语</td>
               <td>123456</td>
               <td>13238674929</td>
               <td>2045219107@qq.com</td>
               <td>云南省保山市</td>
               <td><a href="#" οnclick="del(this)">删除</a>  <a href="#" οnclick="delial(this)">编辑</a></td>
           </tr>
           <tr>
               <td><input type="checkbox" class="cheA"/></td>
               <td>张三3</td>
               <td>男</td>
               <td>化学，英语</td>
               <td>123456</td>
               <td>13238674929</td>
               <td>2045219107@qq.com</td>
               <td>云南省保山市</td>
               <td><a href="#" οnclick="del(this)">删除</a>  <a href="#" οnclick="delial(this)">编辑</a></td>
           </tr>
       </table>
       <fieldset id="">
           <legend>添加用户</legend>
           <div>
                   <tr>
                       <p>
                           姓名：<td><input type="text" id="Sname" value="" /></td>
                           <span id="nameSpan"></span>
                       </p>
                       <p>
                           性别：<td><input type="radio" name="sex" id="Nsex" checked="checked"/>男
                           <input type="radio" name="sex"/>女
                           </td>
                           <span id="sexspan"></span>
                       </p>
                       <p>
                           科目：<td><input type="checkbox" value="历史" class="kemu"/>历史
                           <input type="checkbox" value="政治" class="kemu"/>政治
                           </td>
                           <span id="kemuspan"></span>
                       </p>
                       <p>
                           密码：<td><input type="text" id="loginPwd" value="" /></td>
                           <span id="pwdSpan"></span>
                       </p>
                       <p>
                           确认密码：<td><input type="text" id="queryPwd" value="" /></td>
                           <span id="querySpan"></span>
                       </p>
                       <p>
                           手机号：<td><input type="text" id="loginPhone" value="" /></td>
                           <span id="phoneSpan"></span>
                       </p>
                       <p>
                           邮箱：<td><input type="text" id="Emeil" value="" /></td>
                           <span id="EmeilSpan"></span>
                       </p>
                       <p>
                           地址：<td>
                               <select id="province">
                                   <option value="0">===请选择===</option>
                               </select>省
                               <select id="city">
                                   <option value="0">===请选择===</option>
                               </select>
                           </td>
                           <span id=""></span>
                       </p>
                       <p><input type="button" id="btn" value="添加" /></p>
                   </tr>
           </div>

       </fieldset>
       <fieldset id="">
           <legend>修改用户</legend>
           <div>
                   <tr>
                       <p>
                           姓名：<td><input type="text" class="Sname" value="" /></td>
                           <span class="nameSpan"></span>
                       </p>
                       <p>
                           性别：<td><input type="radio" name="sex" class="Nsex" checked="checked"/>男
                           <input type="radio" name="sex"/>女
                           </td>
                           <span class="sexspan"></span>
                       </p>
                       <p>
                           科目：<td><input type="checkbox" value="历史" class="kemu1"/>历史
                           <input type="checkbox" value="政治" class="kemu1"/>政治
                           </td>
                           <span class="kemuspan"></span>
                       </p>
                       <p>
                           密码：<td><input type="text" class="loginPwd" value="" /></td>
                           <span class="pwdSpan"></span>
                       </p>
                       <p>
                           确认密码：<td><input type="text" class="queryPwd" value="" /></td>
                           <span class="querySpan"></span>
                       </p>
                       <p>
                           手机号：<td><input type="text" class="loginPhone" value="" /></td>
                           <span class="phoneSpan"></span>
                       </p>
                       <p>
                           邮箱：<td><input type="text" class="Emeil" value="" /></td>
                           <span class="EmeilSpan"></span>
                       </p>
                       <p>
                           地址：<td>
                               <select class="province">
                                   <option value="0">===请选择===</option>
                               </select>省
                               <select class="city">
                                   <option value="0">===请选择===</option>
                               </select>
                           </td>
                           <span class=""></span>
                       </p>
                       <p><input type="button" class="btn" value="修改" /></p>
                   </tr>
           </div>

       </fieldset>
   </body>
   <script type="text/javascript">
       //非空验证姓名
       $("#Sname").blur(function(){
           if ($(this).val()=="") {
               $("#nameSpan").html("请输入姓名");
           } else{
               $("#nameSpan").html("");
           }
       });
       //密码非空验证长度验证
       $("#loginPwd").blur(function(){
           if ($(this).val()=="") {
               $("#pwdSpan").html("请输入密码");
           } else{
               $("#pwdSpan").html("");
               if ($(this).val().length>=6 && $(this).val().length<=16) {

               } else{
                   $("#pwdSpan").html("请输入6-16位的密码");
               }
           }
       });
       //确认密码的比较验证
       $("#queryPwd").blur(function(){
           if ($(this).val()==$("#loginPwd").val()) {

           } else{
               $("#querySpan").html("两次密码不一致");
           }
       });
       //手机号的非空验证，正则表达式
       $("#loginPhone").blur(function(){
           if ($(this).val()=="") {
               $("#phoneSpan").html("请输入手机号");
           } else{
               $("#phoneSpan").html("");
               var te=/^(1[3-9])+\d{9}$/
               if (te.test($(this).val())) {
                   $("#phoneSpan").html("");
               } else{
                   $("#phoneSpan").html("请输入正确的手机号");
               }
           }
       });
       //邮箱的非空验证，正则表达式
       $("#Emeil").blur(function(){
           if ($(this).val()=="") {
               $("#EmeilSpan").html("请输入邮箱");
           } else{
               $("#Emeil").html("");
               var tes=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
               if (tes.test($(this).val())) {
                   $("#EmeilSpan").html("");
               } else{
                   $("#EmeilSpan").html("请输入正确的邮箱");
               }
           }
       });
       //省市二级联动
       var pro=["云南省","四川省","贵州省"];
       var cit=new Array();
       cit["云南省"]=["昭通市","保山市","大理市"];
       cit["四川省"]=["宜宾市","成都市","乐山市"];
       cit["贵州省"]=["贵阳市","毕节市","铜仁市"];
       for (var i=0;i<pro.length;i++) {
           $("#province").append("<option value='"+pro[i]+"'>"+pro[i]+"</option>");
       }
       $("#province").change(function(){
           for (var i=0;i<cit[$(this).val()].length;i++) {
               $("#city").append("<option value='"+cit[$(this).val()][i]+"'>"+cit[$(this).val()][i]+"</option>");
           }
       });
       //全选
       $("#ChageAll").click(function(){
           $(".cheA").prop("checked",this.checked);
       });
       //反选
       $("#ChageA").click(function(){
           $(".cheA").each(function(ind,ob){
               if (ob.checked) {
                   ob.checked=false;
               } else{
                   ob.checked=true;
               }
           });
       });
       var te="";
           $(".kemu:checked").each(function(ind,obj){
               te+=$(obj).val()+",";
           });
       $("#btn").click(function(){

           //添加数据
       var tr=$("<tr><td><input type='checkbox' class='cheA'/></td><td>"+
       $("#Sname").val()+"</td><td>"+
       ($("#Nsex").get(0).checked?"男":"女")+"</td><td>"+
       te.substr(0,te.length-1)+"</td><td>"+
       $("#loginPwd").val()+"</td><td>"+
       $("#loginPhone").val()+"</td><td>"+
       $("#Emeil").val()+"</td><td>"+
       $("#province").val()+$("#city").val()+"</td><td><a href='#' οnclick='del(this)'>删除</a>"+
       "<a href='#' οnclick='delial(this)'>编辑</a></td></tr>");
       $("table").append(tr);
       });
       //数据修改
       for (var i=0;i<pro.length;i++) {
           $(".province").append("<option value='"+pro[i]+"'>"+pro[i]+"</option>");
       }
       $(".province").change(function(){
           for (var i=0;i<cit[$(this).val()].length;i++) {
               $(".city").append("<option value='"+cit[$(this).val()][i]+"'>"+cit[$(this).val()][i]+"</option>");
           }
       });
       //获取数据填充到下面
       var trs;
       function delial(l){
           trs=$(l).parents("tr");
           var td=$(l).parents("tr").children();
           $(".Sname").val($(td[1]).html());
           $(".loginPwd").val($(td[4]).html());
           $(".queryPwd").val($(td[4]).html());
           $(".loginPhone").val($(td[5]).html());
           $(".Emeil").val($(td[6]).html());

       }
       $(".btn").click(function(){
           var td=trs.children();
           $(td[1]).html($(".Sname").val());
           $(td[4]).html($(".loginPwd").val());
           $(td[5]).html($(".loginPhone").val());
           $(td[6]).html($(".Emeil").val());
           $(td[7]).html($(".province").val()+$(".city").val());

       });
       //删除
       function del(d){
           $(d).parents("tr").remove();
       }
   </script>
</html>