克隆表行并将 ID 加 1答案

【问题标题】：Clone table row and increment IDs by 1克隆表行并将 ID 加 1
【发布时间】：2015-09-01 18:34:22
【问题描述】：

在下面的 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

【问题讨论】：

你为什么不关闭任何div.form-groups？
事故。它们在我的真实代码中是封闭的。现在应该修好了。

标签： jquery html clone

【解决方案1】：

这是你更新的小提琴 - 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。

希望对你有帮助！

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

删除不需要的$(this).find('tr:last');，您不需要它，因为您已经在使用$('#FinancialDataTable tr').each() 循环遍历表格行。
删除i++;，因为.each() 会为您执行递增操作。
如果您希望第一行的 ID 保持#FinancialDataTable 而不是变成#FinancialDataTable1，只需在i 为1 的情况下添加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);
    });

});

【讨论】：

回到这个...我实际上确实需要原始行来保留名称（FinancialItem 等）并将新行增加一（FinancialItem1）。你能帮忙吗？

【解决方案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);

});

}

【讨论】：