Question

假设我的这个表单带有索引输入字段username和level：

<form>
 <table>
  <tr class="trToClone">
    <td>
      <label>Username:</label>
      <input type="text" name="username[0]" />
    </td>
    <td>
      <label>Level:</label>
      <select name="level[0]">
        <option value="">---</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
      </select>
    </td>
    <td><input type="button" class="addField" value="Add" /></td>
  </tr>
 </table>  
</form>

可以使用此jQuery重复该行：

$("input.addField").on('click', function() {
  var $tr = $(this).closest('.trToClone');
  var $clone = $tr.clone();
  $clone.find(':text').val('');
  $tr.after($clone);
});

现在，对于我添加的每个后续行，我想增加name属性的索引（即username[1]，level[1]; username[2]，level[2] ; 等等...）。我怎样才能做到这一点？我寻找可能的解决方案，但无济于事。

Answer 1

使用$('.trToClone').length指定新索引，使用jQuery name方法在.attr()属性的每个元素上修改它：

$("input.addField").on('click', function() {
  var $tr = $(this).closest('.trToClone');
  var $clone = $tr.clone(true, true);
  
  var $names = $clone.find('[name]');
  var trIndex = $('.trToClone').length;
  
  $names.each(function(index, element) {
     
    var newName = $(element).attr('name').replace(/[0-9]/g, trIndex);
   
    $(element).attr('name', newName);
    
    console.log($(element).attr('name'));
  
  });
  
  $clone.find(':text').val('');
  $tr.after($clone);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <table>
  <tr class="trToClone">
    <td>
      <label>Username:</label>
      <input type="text" name="username[0]" />
    </td>
    <td>
      <label>Level:</label>
      <select name="level[0]">
        <option value="">---</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
      </select>
    </td>
    <td><input type="button" class="addField" value="Add" /></td>
  </tr>
 </table>  
</form>

Answer 2

$('.addField').click(function(){
  var count = $('#btnIncrease').val();
  var $tr = $(this).closest('.trToClone');
  var $clone = $tr.clone();
  count++;
  $('#btnIncrease').val(count);
  $clone.find(':text').val('');
  $clone.find(':text').attr('name', 'username[' + count + ']');
  $tr.after($clone); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="trToClone">
    <td>
      <label>Username:</label>
      <input type="text" name="username[0]" />
    </td>
    <td>
      <label>Level:</label>
      <select name="level[0]">
        <option value="">---</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
      </select>
    </td>
    <td><input type="button" class="addField" value="Add" /></td>
  </tr>
 </table>
 
 <input type="hidden" id="btnIncrease" value="0" />

这对你有用。

Answer 3

更新：动态更改名称属性。

您可以使用计数器来计算点击次数！您必须将“添加”单击按钮移出表格行。 HTML：

<form>
 <input type="button" class="addField" value="Add" />
 <table>
  <tr class="trToClone">
    <td>
      <label>Username:</label>
      <input type="text" name="username[0]" />
    </td>
    <td>
      <label>Level:</label>
      <select name="level[0]">
        <option value="">---</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
      </select>
    </td>
    <td></td>
  </tr>
 </table> 
</form>

JS：

var counter = 0;
$("input.addField").on('click', function() {
    counter++;
  var $tr = $('.trToClone:eq(0)');
  var $clone = $tr.clone();
  var newTextName = $clone.find(':text').attr('name').replace(/\[(\d)+\]/,'[+ counter +']');
  $clone.find(':text').attr('name',newTextName);
  $clone.find('.dropdown').attr('name','level['+ counter + ']');
  $tr.parent().append($clone);
});

看看这个小提琴：https://jsfiddle.net/gknrfw1g/2/

Answer 4

要添加name属性，首先需要查找当前行的索引，然后可以向索引添加1并再次更新text和select列表的name属性。尝试使用以下代码 -

注意 - 您还应隐藏上一行的添加按钮，并再次为新克隆的行绑定click函数。

＆＃13;

 $("input.addField").on('click', function() {
      var $tr = $(this).closest('.trToClone');
      var $clone = $tr.clone();
      var lastIndexName= $clone.find(':text').attr("name").split('[');
      var lastIndex=parseInt(lastIndexName[1].substring(0,1));
      var updatedNameValue="username["+(lastIndex+1)+"]";
      $clone.find(':text').attr("name",updatedNameValue);
      $clone.find(':text').val('');
      $clone.find('select').attr("name","level["+(lastIndex+1)+"]")
      $tr.after($clone);
    });

＆＃13;

以动态形式增加表单输入字段的name属性的索引

4 个答案:

更新：动态更改名称属性。