克隆 table 行并将 ID 递增 1

Question

在我下面的 js 代码中，我正在克隆 table 的最后一行并尝试将 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 中的 table 行有以下代码：

<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

Answer 1

这是您更新后的 fiddle - http://jsfiddle.net/7esk26eg/7/

更新后的代码如下

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

var count = rows.length;
var lastRow = rows[count-1];

var selectinput = $(lastRow).find('select');
var textinput = $(lastRow).find('input');
var textarea = $(lastRow).find('textarea');

selectinput.eq(0).attr('id', 'FinancialItem' + count);
textinput.eq(0).attr('id', 'FinancialAmount' + count);
textarea.eq(0).attr('id', 'FinancialDescription' + count);

一旦您克隆了该行，就没有必要遍历所有行只是为了转到最后一行来更改 ID。

简单地说，检查行的长度并获取最后一行元素并更新 id。

希望对您有所帮助！

Answer 2

您可以在追加之前递增 id。这样你就不必遍历所有的 trs。

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

    var trlength= $('#FinancialDataTable tbody tr').length+1;
    var lasttr=$('#FinancialDataTable tbody tr:last').clone();
       lasttr.find('select').attr('id', 'FinancialItem' + trlength);
       lasttr.find('input').attr('id', 'FinancialAmount' + trlength);
       lasttr.find('textarea').attr('id', 'FinancialDescription' + trlength);                

  $('#FinancialDataTable tbody').append(lasttr);    

});

fiddle updated

Answer 3

删除不必要的 $(this).find('tr:last');，您不需要它，因为您已经在使用 $('#FinancialDataTable tr').each() 循环遍历 table 行。
删除 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);
    });

});

Answer 4

函数 addNewRow(tableId) {

$('#'+tableId).append($('#'+tableId+' tr:last').clone());
$('#'+tableId+' tr').each(function(i) {
                                        /*Find all childs*/
    $(this).find('tr:last');

    var delitem=$(this).find($('input[name="delitem[]"]'));
    var item_code=$(this).find($('input[name="item_code[]"]'));
    var mst_itemid=$(this).find($('input[name="mst_itemid[]"]'));
    var detailId=$(this).find($('input[name="detailId[]"]'));
    var item_name=$(this).find($('input[name="item_name[]"]'));
    var technical_specification=$(this).find($('select[name="technical_specification[]"]'));
    var make_option=$(this).find($('select[name="make_option[]"]'));
    var Unit=$(this).find($('select[name="Unit[]"]'));
    var stock_qty=$(this).find($('input[name="stock_qty[]"]'));
    var requisition_qty=$(this).find($('input[name="requisition_qty[]"]'));
    var total_estd_cast=$(this).find($('input[name="total_estd_cast[]"]'));
    var textarea = $(this).find('textarea');

                                                /* Incremet child ids*/
    i++;
    delitem.eq(0).attr('id', 'delitem_'+i);
    item_code.eq(0).attr('id', 'item_code_'+i);
    mst_itemid.eq(0).attr('id', 'itemid_'+i);
    detailId.eq(0).attr('id', 'detailId_'+i);
    item_name.eq(0).attr('id', 'itemname_'+i);
    technical_specification.eq(0).attr('id', 'technicaSpecification_'+i);
    make_option.eq(0).attr('id', 'make_'+i);
    Unit.eq(0).attr('id', 'Unit_'+i);
    stock_qty.eq(0).attr('id', 'stockqty_'+i);
    requisition_qty.eq(0).attr('id', 'requisitionqty_'+i);
    total_estd_cast.eq(0).attr('id', 'totalestdcast_'+i);
    textarea.eq(0).attr('id', 'remark_'+i);

});

}

克隆 table 行并将 ID 递增 1

Clone table row and increment IDs by 1

html

jquery

clone