jquery - 克隆表行并将ID递增1

在下面的js代码中，我正在克隆表的最后一行，并试图将id增加一个。

function addNewRow() {

$('#FinancialDataTable tbody').append($('#FinancialDataTable tbody tr:last').clone());

$('#FinancialDataTable tr').each(function(i) {
$(this).find('tr:last');
var selectinput = $(this).find('select');
var textinput = $(this).find('input');
var textarea = $(this).find('textarea');
i++;
selectinput.eq(0).attr('id', 'FinancialItem'+i);
textinput.eq(0).attr('id', 'FinancialAmount'+i);
textarea.eq(0).attr('id', 'FinancialDescription'+i);
});

}

对于表中的表行，我有以下代码：

<table id="FinancialDataTable">
<tr>
  <td>
    <div class="form-group">
        <select class="form-control" id="FinancialItem"></select>
    </div>
</td>
  <td>
    <div class="form-group">
        <input class="form-control" id="FinancialAmount"></select>
    </div>
  </td>
  <td>
    <div class="form-group">
        <textarea class="form-control" id="FinancialAmount"></select>
    </div>
</td>
</tr>
</table>
    <button type="button">Add New Row</button>

它将原始行更改为：

    <table id="FinancialDataTable">
<tr>
  <td>
    <div class="form-group">
        <select class="form-control" id="FinancialItem2"></select>
    </div>
</td>
  <td>
    <div class="form-group">
        <input class="form-control" id="FinancialAmount2"></select>
    </div>
  </td>
  <td>
    <div class="form-group">
        <textarea class="form-control" id="FinancialAmount2"></select>
    </div>
</td>
</tr>
</table>
    <button type="button">Add New Row</button>

当我再次点击按钮时，我得到：

    <table id="FinancialDataTable">
<tr>
  <td>
    <div class="form-group">
        <select class="form-control" id="FinancialItem3"></select>
    </div>
</td>
  <td>
    <div class="form-group">
        <input class="form-control" id="FinancialAmount3"></select>
    </div>
  </td>
  <td>
    <div class="form-group">
        <textarea class="form-control" id="FinancialAmount3"></select>
    </div>
</td>
</tr>
</table>
    <button type="button">Add New Row</button>

任何帮助都将不胜感激！JSFIDDLE

最佳答案

删除unecesarry$(this).find('tr:last');，您不需要它，因为您已经在使用$('#FinancialDataTable tr').each()循环表行。
移除i++;，因为.each()会为您递增。
如果您希望第一行的id保持#FinancialDataTable而不是变成#FinancialDataTable1，只要在i是一行的情况下添加一个return，这意味着您当前正在查看第一行。
最后的代码如下：（JSFiddle）

$('.btn').click(function () {

    $('#FinancialDataTable tbody').append($('#FinancialDataTable tbody tr:last').clone());

    $('#FinancialDataTable tr').each(function(i) {
        if (i === 1)
            return;

        var selectinput = $(this).find('select');
        var textinput = $(this).find('input');
        var textarea = $(this).find('textarea');
        selectinput.eq(0).attr('id', 'FinancialItem' + i);
        textinput.eq(0).attr('id', 'FinancialAmount' + i);
        textarea.eq(0).attr('id', 'FinancialDescription' + i);
    });

});

关于jquery - 克隆表行并将ID递增1，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30876089/