Question

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

不是将新添加的行递增1，而是将原始行更改为：

    <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

删除不可靠的$(this).find('tr:last');，因为您已经在使用$('#FinancialDataTable tr').each()循环遍历表格行，所以不需要它。
删除i++;，因为.each()会为您进行递增。
如果您希望第一行的ID保持#FinancialDataTable而不是#FinancialDataTable1，只需添加一个返回，以防i为1，这意味着您当前正在查看第一行。

您的最终代码如下所示：（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 2

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

您可以在追加前增加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 4

function 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);

});

}

将表格行和增量ID克隆为1

4 个答案: