以 html 形式动态递增名称属性？

Question

我正在尝试使用动态创建的表单一次将多个数据发送到数据库，该表单在我单击“添加”按钮时添加新字段。我已经完成了大部分项目，但要将数据发送到控制器，我需要动态地增加名称属性，我无法做到这一点。我是 spring 广告 Jquery 的新手。目前我只能发送索引为 0 和 1 的两个数组对象。

这是我的html表格

<script>
    $(document).ready(function(){
    //group add limit
    var maxGroup = 10;
    
    //add more fields group
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });
    
    //remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});
</script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
    
  <a class="navbar-brand" th:href="@{/}" href="#">
  <img src="" class="logo" th:src="@{/image/logo.png}" alt="logo">
  Assam Power Distribution Company Limited</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
   
  </div>
</nav>

<form method="post" th:action="@{/addfeeder}" th:object="${feeder}">
            
    <div class="form-group fieldGroup" >
        <div class="input-group mt-1 p-1 bg-light">
            <input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
  <select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
    <option selected>Choose Capacity</option>
    <option value="11">11</option>
    <option value="33">33</option>
  </select>
          
            <input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers"/>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
            </div>
        </div>
    </div>
    
    <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
    
</form>


<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
    <div class="input-group mt-1 p-1 bg-light">
        <input type="text" name="feeder[1].feeder_name" class="form-control" placeholder="Enter Feeder name"/>
        <select name="feeder[1].feeder_type" class="custom-select" id="inputGroupSelect01">
    <option selected>Choose Capacity</option>
    <option value="11">11</option>
    <option value="33">33</option>
  </select>
        
        <input type="text" name="feeder[1].no_of_consumer_in_the_feeder" class="form-control" placeholder="Enter Consumers"/>
        <div class="input-group-addon"> 
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>

这是我的控制器


    //adding feeder details
    @PostMapping("/addfeeder")
    public String addFeeder(@ModelAttribute FeederList feederlist)
    {

        System.out.println("Data"+feederlist);
        
        System.out.println(feederlist.getFeeder().size());
        
        for(Feeder c:feederlist.getFeeder())
               System.out.println(c);
        return "feeder";
        
        
    }
    
    public class FeederList {
        private List<Feeder> feeder=new ArrayList<>();

        public List<Feeder> getFeeder() {
            
             return feeder;
        }

        public void setFeeder(List<Feeder> feeder) {
             this.feeder = feeder;
        }

}

Answer 1

在页面加载时使用 clone() 制作第一组的副本。当添加一个新的时，我们制作另一个存储的克隆
为组创建一个包装容器，使其更容易附加到
创建的函数 adjustNames() 在添加或删除行时调用。删除过程会抛出对其后面名称的索引，因此似乎最安全的方法就是遍历所有名称。您可以看到文本输入名称设置为开发中验证的值

待办事项：如果删除所有行然后添加一个错误。如果只剩下一个

，也许会阻止移除

//group add limit
var maxGroup = 5;

var $groupContain = $('#group-container'); 

// clone first group
var $groupCopy = $groupContain.find('.fieldGroup').first().clone();
$groupCopy.find(':input').val('') // clear any values if prepopulated

//add more fields group
$(".addMore").click(function() {
  var groupLen = $groupContain.find('.fieldGroup').length
  if (groupLen < maxGroup) {
    var $newGroup = $groupCopy.clone();
    $groupContain.append($newGroup);
    adjustNames()
  } else {
    alert('Maximum ' + maxGroup + ' groups are allowed.');
  }
});

function adjustNames(){
  // clear console for demo 
  $groupContain.find('.fieldGroup').each(function(i){
     var $inputs =   $(this).find(':input[name]');
     // uses the group index to update array names
     $inputs.attr('name', function(j, currName) {    
      return currName.replace(/\[\d+\]/, `[${i}]`);      
    });
    // for demo set names in text fields
    $inputs.filter(':text').val(function(){
       return this.name;
    });    
  });
}

//remove fields group
$("body").on("click", ".remove", function() {
  $(this).parents(".fieldGroup").remove();
  adjustNames()
});

a{display:inline-block;padding:10px; font-size:1.2em}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form method="post" th:action="@{/addfeeder}" th:object="${feeder}">
  <div id="group-container">
    <div class="form-group fieldGroup">
      <div class="input-group mt-1 p-1 bg-light">
        <input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
        <select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
          <option selected>Choose Capacity</option>
          <option value="11">11</option>
          <option value="33">33</option>
        </select>
        <input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers" />        
        <button class="remove"> Remove </button>
      </div>
    </div>
  </div>
  <div class="input-group-addon">
    <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
  </div>
  </div>
  <!--<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />-->
</form>

以 html 形式动态递增名称属性？

Dynamically increment name property in an html form?

html

javascript

jquery

spring-mvc

spring-boot

以 html 形式动态递增名称 属性？

Dynamically increment name property in an html form?

html

javascript

jquery

spring-mvc

spring-boot

以 html 形式动态递增名称属性？