Clone table row and increment IDs by 1

jquery clone table row and remove
jquery clone table row without data
jquery copy table row to another table
clone increment decrement div on click
jquery clone and change id
clone table row javascript
jquery clone form fields and increment id
jquery delete table row

In my js code below I am cloning the last row of my table and attempting to increment the IDs by one.

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

}

I have the following code for my table rows in the 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>

Instead of incrementing the newly added row by one it changes the original row to:

    <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>

and when I click the button again I get:

    <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>

Any help would be appreciated! JSFIDDLE

  1. Remove the unecesarry $(this).find('tr:last');, you don't need it since you are already using $('#FinancialDataTable tr').each() to loop through the table rows.
  2. Remove the i++;, as .each() does the incrementing for you.
  3. If you want the ID of the first row to stay #FinancialDataTable and not become #FinancialDataTable1, just add a return in case i is one, which means you are currently looking at the first row.

Your final code would look like this: (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);
    });

});

[SOLVED] get jQuery clone to copy a table row and increment id , Solution: Combining one part of the first script (the .find(*)) with the second script I was able to get the ids to. Clone table row and increment IDs by 1 Tag: jquery , html , clone In my js code below I am cloning the last row of my table and attempting to increment the IDs by one.

Here is your updated fiddle - http://jsfiddle.net/7esk26eg/7/

Updated code is below

$('#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);

Once, you have cloned the row, there is no point iterating over all the rows just to go to the last row to change the id's.

Simply, check the length of rows and get the last row element and update the ids.

I hope it helps!

Create unique IDs after cloning table row, Hi, I am pretty new to JS and use the below code to clone a table row 10)==1){​lastRow()}else{$(this).closest('tr').remove(); delRow()}"><i Everytime you create a new row increment that variable to use as the index of the ID  Table A contains the title of a book and has an auto-increment column, book_id, that I declared as primary key. In table B , I want to retain the price of the book having the same book_id value. In this case, the book_id column will be constrained as a foreign key and I dont want to auto-increment it.

You can increment the id before appending. That way you don't have to loop through all 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

Jquery add and remove table row - JavaScript, So I would like to have a program to enable me to add and remove table row which have few columns. { id++; var master = $(this).parents("table.dynatable"); // Get a new row based on the prototype row var prot = master.find(".prototype").​clone(); prot.attr("class", First must we always include the jquery-1.5.1.min.js is it? I have a table Eg- tab. What I am trying to do is copying a row with an autoincrement column ID=1 and insert the data into the same table with a row and column ID=2.

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

}); 

}

Increment ID of selected cloned elements by one, <table border="1" class="likertBorder" cellpadding="2" id="actTbl" > <tr class="​likertBorder responseRow" id="actRow"> <td class="likertBorder"  This should put everything as Name, Age, City per row, with a different person on each row. copy and paste the table from word to excel. Then you can use the Transpose function in excel to rotate the layout by 90, and make it row1 = name, row2=age, row3=city, and then re-add the row headers in. This now puts each person in a new column

Re: [jQuery] Cloning a table row and changing its form field IDs, Can anyone point me in the right direction for incrementing the IDs of the fields that are cloned? My HTML looks like this for each row: <tr> This was for records/rows 86, and 87 which were the two rows added at the start of the flow and so didn't have numbers assigned to them yet. Rows 1-85 picked up the integer number already in the row no problem. The flow didn't continue to the last Compose step.

Increment ID & using JS scripts on clones, The clone also increments the ids you can use the same approach with the See my code below, after I duplicate the row I add the select and remove value​="0">Please select</option> <option value="1">One</option>  That said, in general, one cannot rely on auto-increment ID values to be sequential without gaps. When a row is created and rolled back, the auto-increment value for that row goes away; the next row added will have the next value, and the one from the rolled back row will be skipped.

HTML DOM TableRow insertCell() Method, Insert new cell(s) with content at the end of a table row with id="myRow": var row = document.getElementById("myRow"); var x = row.insertCell(-1); x.innerHTML  In this case, the first instance of the formula is in cell D6 so, ROW() returns 6 inside the formula in D6. We want to start with 1, however, so we need to subtract 5, which yields 1. As the formula is copied down column D, ROW() keeps returning the current row number, and we keep subtracting 5 to "normalize" the result back to a 1-based scale:

Comments
  • Why aren't you closing any of the div.form-groups?
  • Accident. They are closed in my real code. Should be fixed now.
  • Coming back to this...I actually do need the original row to stay the name (FinancialItem, etc.) and have the new row increment by one (FinancialItem1). Can you help?