js操作批量数据的节点

Roriring

已于 2023-08-07 10:05:00 修改

阅读量556

点赞数

分类专栏：前端文章标签： javascript

于 2019-04-09 10:30:31 首次发布

本文链接：https://blog.csdn.net/Roriring/article/details/89137034

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

需求：如下图，点击单元后面的“+”可以增加一列单元input框，点击“-”可以删除当前input框

from表单的jsp代码：

  <form id="addBuildingUnitForm" class="add-popu-form" data-am-validator>
       <div class="inputItem">
           <div class="inputName">楼栋</div>
           <input type="text" required minlength="1" maxlength="10" id="buildingId" name="buildingId" class="" placeholder="请输入1-10个字符" autocomplete="off">
       </div>
       <div class="inputItem">
           <div class="inputName" style="margin-left: 20px;">单元</div>
           <input type="text" required minlength="1" maxlength="10" id="buildingUnitId" name="buildingUnitId" class="" placeholder="请输入1-10个字符" autocomplete="off">
           <div class="add-unit-input">+</div>
       </div>
       <div class="inputItem">
           <div class="inputName">社区名称</div>
           <input type="text" id="" name="" class="" disabled autocomplete="off">
       </div>
   </form>

js动态增减input的代码：

  //增加单元的input行
      $(".add-unit-input").click(function () {
          var newHtml = '';
          newHtml += '<div class="inputItem">';
          newHtml += '<input type="text" name="residentName" class="cardNum" style="margin-left: 79px;" placeholder="请输入单元" autocomplete="off" required>';
          newHtml += '<div class="del-unit-input">-</div>';
          newHtml += '</div>';
          $(this).parent().after(newHtml);
      });

  //删除单元的input行
      $("#addBuildingUnitForm").on("click", '.del-unit-input', function () {
          $(this).parent().remove();
      });

补充：在打开新增楼栋单元modal时需要对modal进行初始化，就是将前一次新增的input框去掉，如下图：
在这里插入图片描述

  //添加楼栋单元，在打开modal时删除不必要的input
  function addBuildingUnit() {
      $("#addBuildingUnitForm").validator('destroy');//销毁
      $('#addBuildingUnitForm').validator({validateOnSubmit: true});//提交时验证，配合上面的销毁实现销毁
      $("#addBuildingUnitForm")[0].reset();
      $("#addBuildingUnit").modal({closeViaDimmer: false });//点击遮罩不关闭modal
  
      //删除class为del-unit-input的父标签，即在打开新增卡modal的时候只保留一个单元输入框
      var inpItem = document.getElementsByTagName('div');
      for(var i = 0;i <inpItem.length;i++){
          if(inpItem[i].classList.contains('del-unit-input')==true){
              $(".del-unit-input").parent().remove();
          }
      }
  
      $("#addBuildingUnit").modal("open");
  }