在Javascript中克隆一行时增加元素Id

Increment element Id upon cloning a row in Javascript

本文关键字：一行 增加 Id 元素 Javascript      更新时间：2023-09-26

我有一个HTML页面，其中一行有2个下拉元素和一个文本输入元素。我添加了一个按钮来成功克隆这一行。我为POST动作添加了另一个按钮，将所有下拉框和文本输入值推送到数据库。这里的问题是，在克隆时，行中元素的Id也被克隆-所以我无法获取值。

My HTML Code:

    <div class="rule">
                 <div class="form-group">
                   <div class="col-md-3 col-sm-3 col-xs-3">
                    <select class="form-control" name="condition" id="condition">
                    <option value="">Choose Sensor</option>
                     <option>1</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
                  </div>

                  <div class="col-md-3 col-sm-3 col-xs-3">
                    <select class="form-control" name="paraop" id="paraop">
                      <option>Choose Condition</option>
                      <option>Equal to</option>
                      <option>Less than</option>
                      <option>Greater than</option>
                    </select>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-3">
                   <input type="text" required="true" placeholder="Value..." class="form-control"  name="value" id="value">
                  </div>
                </div>
                 <div class="rule-options">
                <a href="#" class="add-rule-btn"><i class="fa fa-plus-circle"></i></a>
                <a href="#" class="remove-rule-btn"><i class="fa fa-times-circle"></i></a>
                </div>
                </div>

克隆的元素是"condition"、"paraop"answers"value"。

Javascript代码克隆:

      handleAddRule: function() {
      var _self = this;
    $('.add-rule-btn').live('click', function() {
      var parentRuleGroup = $(this).parents('.rule');
      var newRule = $('.rule:first').clone();
     newRule.insertAfter($(this).parents('.rule'));
      return false;
    });
  },

我正在考虑增加元素id每次我按下添加按钮-所以我可以很容易地从POST php文件中获取他们的id元素。但是如何增加Id值呢?或者是否有其他方法从POST页面检索元素?

让这个工作。我所需要的只是javascript中的这个额外的块，它将查找输入并附加一个递增的数字。

count++;
 newRule.find(':input').attr('id', function(i, val) {
        return val + count;
    });

基于这个问题的答案克隆表单和增量ID

相关文章：