jquery——标签4——增删改查

最新推荐文章于 2022-09-02 17:05:16 发布

幸运的左右

最新推荐文章于 2022-09-02 17:05:16 发布

阅读量259

点赞数

分类专栏： RIA

本文链接：https://blog.csdn.net/love_xxxooo/article/details/79362666

版权

RIA 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/jquery-1.11.0.js"></script>
       <script>
           $(function(){
               $("#login").click(function(){
                   var name=$("#name").val();
                   var sex=$("input:radio:checked").val();
                   var hobby="";
                   $("input:checkbox:checked").each(function(){
                         hobby+=$(this).val()+",";
                   });
                   var dizhi="";
                   var sheng=$("#sheng").val();
                   var shi=$("#shi").val();
                   dizhi=sheng+=shi;
                   /*添加到表格中*/
                   $("#tab").append("<tr><td><input type='checkbox' class='cb'/></td><td>"+name+"</td><td>"+sex+"</td><td>"+hobby+"</td><td>"+dizhi+"</td><td><input type='button' value='删除' class='remove'/></td></tr>")
                   /*单行删除*/
                   $(".remove").click(function(){
                     var result=confirm("确定删除吗？");
                     if(result){
                        $(this).parent().parent().remove();
                     }
                      $(this).parent().parent().remove();

                   });
                   /*批量删除*/
                   $("#removeall").click(function(){
                      var result=confirm("确定删除吗？");
                     if(result){
                        $(this).parent().parent().remove();
                     }
                   $(".cb:checked").parent().parent().remove();
                   });
                  /*全选*/
                  $("#quanxuan").click(function(){
                   $(".cb:checkbox").prop("checked",true);

                  });
                  /*反选*/
               $("#fanxuan").click(function(){
                  $(".cb:checkbox").each(function(){
                      $(this).prop("checked",!$(this).prop("checked"));
                  });

               });
               /*隔行换色*/
               $("tr:even").css("background-color","greenyellow");
               $("tr:odd").css("background-color","blue");
                });


           })
       </script>
   </head>
   <body>
       <input type="button" value="全选" id="quanxuan"/>
       <input type="button" value="反选" id="fanxuan"/>
       <input type="button" value="批量删除" id="removeall"/>
       <table border="1" id="tab">
           <tr>
               <td><input type="checkbox"/></td>
               <td id="td-name">姓名</td>
               <td>性别</td>
               <td>爱好</td>
               <td>籍贯</td>
               <td>操作</td>
           </tr>
       </table>
       姓名：<input type="text" placeholder="请输入姓名" id="name"/><br /><br />
       性别：男<input type="radio" name="sex" checked="checked" value="男"/>
                    女<input type="radio" name="sex" value="女"/><br /><br />
       爱好：唱歌<input type="checkbox" checked="checked" value="唱歌"/>
                    睡觉<input type="checkbox" value="睡觉"/>
                    游戏<input type="checkbox" value="游戏"/><br /><br />
       籍贯：<select id="sheng">
               <option value="北京">北京</option>
               <option value="上海">上海</option>
               <option value="天津">天津</option>
            </select>
            <select id="shi">
               <option value="海淀">海淀</option>
               <option value="朝阳">朝阳</option>
               <option value="大兴">大兴</option>
            </select><br /><br />
       <input type="button" value="注册" id="login"/>
   </body>
</html>

幸运的左右

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery——标签4——增删改查

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

扫一扫

专栏目录