JQuery的表单的添加、删除

最新推荐文章于 2019-05-18 15:20:29 发布

SXS120730

最新推荐文章于 2019-05-18 15:20:29 发布

阅读量423

点赞数

本文链接：https://blog.csdn.net/SXS120730/article/details/78196270

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
   姓名：<input type="text" id="np">  年龄：<input type="number" id="pu"> 性别：<input type="text" id="ut" >   <input type="button" value="添加" id="in" >
   <table>
       <tr>
           <th><input type='checkbox' id="ip">全选</th>
           <th> 姓名</th>
           <th> 年龄</th>
           <th> 性别</th>
           <th> 操作</th>
       </tr>

   </table>
  <script>
      var n=0;
      $("#in").click(function () {
            //获取输入的姓名
          var xm=   $("#np").val();
          var nl=   $("#pu").val();
          var xb=   $("#ut").val();
          //  alert(  $("#np").val())
          //创建节点
          $("table").append("<tr>"+"<td>"+"<input type='checkbox'>"+"</td>"+"<td>"+xm+"</td>"+"<td>"+nl+"</td>"+"<td>"+xb+"</td>"+"<td>"+"<span>删除</span>"+"</td>"+"</tr>");

          $("table tr td span").click(function () {
               //判断当前这个复选框被勾选了才能被删除
              if($(this).parents("tr").find("input").prop("checked")==true){

                  $(this).parents("tr").remove();

              }

          });

      });

      //给"全选"一个点击事件，如果全选就把添加的input都设为true
      $("#ip").click(function () {
          if($("#ip").prop("checked")==true){
              $("tr td input").prop("checked",true);
          }else{
              $("tr td input").prop("checked",false);
          }
      });


      //把添加的input设置点击事件,在进行判断是否被勾选，计数器勾选一个就累计一个，然后判断input的长度和计数器是否相等，相等的话就把“全选的input勾选”
      $("table").on("click","input",function () {
              alert(0);
          if($(this).prop("checked")==true){
              n++;
          }else{
              n--;
          }
          if(n==$("tr td input").length){
              $("#ip").prop("checked",true);
          }else{
              $("#ip").prop("checked",false);
          }
      });


  </script>

</body>
</html>