混合开发（3）

最新推荐文章于 2022-04-20 13:42:09 发布

奥特曼不吃小怪兽

最新推荐文章于 2022-04-20 13:42:09 发布

阅读量155

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/zpf_blog/article/details/79840690

版权

Android 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
       <script>
       $(function(){
           $("#insert").click(function(){
               var name=$("#name").val();
               var sex=$("#sex").val();
               var like=[];
               $('input[name="like"]:checked').each(function(){
                 like.push($(this).val());
                });
               var pro=$("#pro option:checked").text();
               var city=$("#city option:checked").text();
               if (name!="") {
                   if (name.length>=6&&name.length<=12) {
                       $("#tab").append("<tr style='text-align: center;'><td ><input type='checkbox' name='kk'></td><td>"+name+"</td><td>"+sex+"</td><td>"+like+"</td><td>"+pro+"-"+city+"</td><td><input type='button' id='del' value='删除' οnclick='dl(this)' style='background: yellow;border-radius: 5px;'/></td></tr>");

                   } else{
                       alert("用户名长度需在6-12位之间!");
                   }
               } else{
                   alert("请输入用户名!");
               }
           })
           dl=function(dd){
               $(dd).parent().parent().remove();
           }
           $("#ck").click(function(){
               var ck=$("#ck")[0].checked;
               var ckk=$("input[name='kk']");
               for (var i=0;i<ckk.length;i++) {
                   ckk[i].checked=ck;
               }
           })
           $("#delete").click(function(){
               var ce=$("input:checked[name='kk']");

               if (ce.length!=0) {
                   var f =confirm("确认删除?");
                   if(f){
                   for (var i=0;i<ce.length;i++) {
                   ce[i].parentNode.parentNode.remove();
               }
                   $("#ck")[0].checked=false;
               }
               } else{
                   alert("请选择数据");
               }
           })
           $("#quanxuan").click(function(){
               $("#ck")[0].checked=true;
               var ckk=$("input[name='kk']");
               for (var i=0;i<ckk.length;i++) {
                   ckk[i].checked=true;
               }
           })
           $("#fanxuan").click(function(){
               $("#ck")[0].checked=false;
               var ckk=$("input[name='kk']");
               for (var i=0;i<ckk.length;i++) {
                   ckk[i].checked=false;
               }
           })
           var citi=new Array(2);
           citi[0]=new Array("海淀","大兴");
           citi[1]=new Array("郑州","洛阳");
           $("#pro").change(function(){
               $("#city").empty();
               var a=this.value;
               for (var i=0;i<citi.length;i++) {
                   if (a==i) {
                       for (var j=0;j<citi[i].length;j++) {
                           $("#city").append("<option>"+citi[i][j]+"</option>")
                       }
                   }
               }
           })
       })
   </script>
       </script>
       <style>
           *{
               margin: 0px;
               padding: 0px;
           }
           .box{
               width: 800px;
               height: 500px;
               margin: 20px auto;
               padding: 10px;
           }
           table tr th{
               width: 150px;
               background: antiquewhite;
           }
           table tr:nth-child(n) td{
               background-color: aqua;
           }
           table tr:nth-child(2n) td{
               background-color: chocolate;
           }

       </style>
   </head>
   <body>
       <div class="box">
       姓名:<input type="text" id="name" /><br /><br />
       性别:<select id="sex">
           <option value="男">男</option>
           <option value="女">女</option>
       </select><br /><br />
       爱好:<input type="checkbox" name="like" value="唱歌"/>唱歌<br />
              <input type="checkbox" name=" like" value="睡觉"/>睡觉<br />
              <input type="checkbox" name="like" value="游戏"/>游戏<br /><br />
       籍贯:<select id="pro">
           <option value="0">北京</option>
           <option value="1">河南</option>
       </select>
       <select id="city">
           <option >海淀</option>
           <option >大兴</option>
       </select><br /><br /><br />
       <input type="button" id="insert" value="注册" style="margin-left:100px;background: yellow;border-radius: 5px;"/><br /><br />
       <br /><br /><table border="1" cellspacing="0" cellpadding="1" id="tab">
           <tr>
               <th><input type="checkbox" id="ck" /></th>
               <th>姓名</th>
               <th>性别</th>
               <th>爱好</th>
               <th>籍贯</th>
               <th>操作</th>
           </tr>

       </table>
        <br /><br />
       <input type="button" id="quanxuan" value="全选" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
       <input type="button" id="fanxuan" value="反选" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
       <input type="button" id="delete" value="批量删除" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
   </div>
   </body>

</html>

奥特曼不吃小怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合开发（3）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-
复制链接

扫一扫