day8

最新推荐文章于 2024-05-17 00:13:31 发布

qq_41640196

最新推荐文章于 2024-05-17 00:13:31 发布

阅读量147

点赞数

分类专栏： day8 文章标签： day8

本文链接：https://blog.csdn.net/qq_41640196/article/details/79228011

版权

day8 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           form label{
               display: block;
               margin: 10px;
           }
       </style>
       
       <script src="../js/jquery-1.11.1.js"></script>
       <script>
           //等待文档加载完成
           $(function(){
               var citys=[["安阳","濮阳","郑州"],["邯郸","保定"],["海淀","朝阳","xxx","yyy"]];

               //添加点击事件
               $("#pro").change(function(){
                   //获取省份的位置
                   var pro_index= $("#pro").val(); //河南===> pro_index=0;
                   $("#xz").siblings().remove();   //每次重新选择省份--->城市清空

                   for(var i=0;i< citys[pro_index].length;i++){
                       var c= $("<option></option>");
                       c.text(citys[pro_index][i]);
                       $("#city").append(c); //把创建的option 添加到city
                   }
               });


           });

           //创建函数
           function save(){
               //获取用户名
               var pro=$("#pro option:selected").text();
               var city=$("#city option:selected").text();
               console.log("地址",pro+"-"+city);


               //创建stu
               var stu={uname:"龚梦成",email:"gmc@126.com",sex:"女",tel:13522746372,address:pro+city};
               add_table(stu);
           }

           //添加到table中的方法
           function add_table(stu){
               var tr=$("<tr></tr>");
               var td0=$("<td><input type='checkbox' name='ck'/></td>")
               var td1=$("<td>"+stu.uname+"</td>");
               var td2=$("<td>"+stu.email+"</td>");
               var td3=$("<td>"+stu.sex+"</td>");
               var td4=$("<td>"+stu.tel+"</td>");
               var td5=$("<td>"+stu.address+"</td>")
               var td6=$("<td><input type='button' value='删除' /></td>")

               tr.append(td0).append(td1).append(td2).append(td3).append(td4).append(td5).append(td6);
               $("table").append(tr);
           }

           //实现全选全不选的操作
           function ckall(){
               //找到name为ck的所有的元素
               $("[name='ck']").prop("checked",$("#flagck")[0].checked);
           }

           function delAll(){
               var cks= $("[name='ck']:checked").size();
               if(cks==0){
                   alert("请选择要删除的元素");
                   return;
               }
               $("[name='ck']:checked").parent().parent().remove(); //删除选择的所有元素

           }



       </script>
   </head>
   <body>

       <form>
           <fieldset>
               <legend>添加用户</legend>
               <label>
               用户名:
               <input id="uname" />
           </label>
               <label>
               邮箱:
               <input id="email" />
           </label>
           <label>
               性别:
               <input name="sex" type="radio" value="男" checked="checked" />男

               <input name="sex" type="radio" value="女" />女
           </label>
           <label>
               电话:
               <input id="tel" />
           </label>
           <label>
               省份:
               <select id="pro" >
                   <option value="">--请选择省份--</option>
                   <option value="0">河南</option>
                   <option value="1">河北</option>
                   <option value="2">北京</option>
               </select>
               城市:
               <select id="city">
                   <option id="xz" value="">--请选择城市--</option>
               </select>

           </label>


               <input type="button" value="保存" οnclick="save()" />

           </fieldset>
       </form>

       <h2>学生信息</h2>
       <table border="1px">
           <tr>
               <td colspan="7">
                   <input type="button" value="批量删除" οnclick="delAll()" />
               </td>
           </tr>
           <tr>
           <td><input type="checkbox" id="flagck" οnclick="ckall()" /></td>
           <td>姓名</td>
           <td>邮箱</td>
           <td>性别</td>
           <td>电话</td>
           <td>地址</td>
           <td>操作</td>
           </tr>
       </table>
   </body>
</html>