jquery删除添加批量删除

最新推荐文章于 2023-03-20 19:51:08 发布

l6666_6666

最新推荐文章于 2023-03-20 19:51:08 发布

阅读量677

点赞数

本文介绍了一个使用HTML和jQuery实现的表单示例，包括表单元素的动态添加、删除及全选功能，并实现了省市区两级联动效果。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="libs/jquery-1.11.0.min.js"></script>
  <script>
   function aa(){
   var name = $("#name").val();
   var sex = $("#sex option:selected").text();
   var data = $("#bir").val();
   var zhu = $("#zhu option:selected").text();
   var zhi = $("#zhi option:selected").text();


    $("table").append("<tr><td><input type='checkbox' name='ck'/></td><td>"+name+"</td><td>"+sex+"</td><td>"+data+"</td><td>"+zhu+"-"+zhi+"</td><td><button onclick='ff(this)'>删除</button></td></tr>");
   }
   function ff(a){
    $(a).parent().parent().remove();
   }


   //全选
   function xuan(){
    var ckss=$(":input[name='ck']")
          for(var i in ckss) {
               if (ckss[i].checked==false) {
               ckss[i].checked=true;
               } else{
                ckss[i].checked=false;
                 }
                }
   }

   //至少选中一条
   function shan(){
   var checks=$(":checked[name=ck]");
   if (checks.length==0) {
   alert("请至少选择一条删除！");
   return;
   }
   //循环选中什么删除什么
   for(var i in checks){
   checks[i].parentNode.parentNode.remove();
   }
   }

   //两级联动
   $(function() {
   var shengfen = [["西二旗","密云"],["邯郸", "廊坊"], ["安阳", "洛阳"]];
   $("#zhu").change(function() {
   $("#cityx").siblings().remove();

   var sheng = $(this).val();//省份对应value
   for(var i = 0; i < shengfen[sheng].length; i++) {
   var $o = $("<option></option>");//创建option标签
   $o.html(shengfen[sheng][i]);
   $("#zhi").append($o);
   }
   });
   });

  </script>
</head>
<body>
  <div>
   姓名：<input type="text" id="name" style="width: 100px;"/>
   性别：<select id="sex">
    <option>男</option>
    <option>女</option>
   </select>
   生日:<input type="date" id="bir" />

   地址<select id="zhu"><option>---请选择省份</option>
    <option value="0">北京市</option>
    <option value="1">河北省</option>
    <option value="2">河南省</option></select>

<select id="zhi"><option id="cityx">---请选择城市</option></select>

    全选/反选
   </button>
   <button onclick="shan()" style="background: red;">批量删除</button>
  </div><br />

//表格
  <div>
   <table style="padding: 1px;width: 700px;margin-top: 5px;" border="1">
    <tr style="background-color: #919191;">
     <td><input type="checkbox" name="chee" onchange="quan(this)"></td>
     <td>姓名</td>
     <td>性别</td>
     <td>生日</td>
     <td>住址</td>
     <td>删除</td>
    </tr>
   </table>
  </div>
</body>
</html>