JQuery insert table row at position

I was working on a solution about being able to insert a row into an html table. It was pretty difficult. I found something that works, but only for the first "insert". I cannot figure out what I am doing wrong.

Ive a basic table with 3 columns, each table has a button to insert a row between two rows. Ive searched this site for a solution and got a jquery solution that works and when I click the button it adds the line where I want. But when I add another row after I have inserted the last row, the row is inserted 1 position back, next time I click the button, it was inserted two rows back, etc. I can't figure out what I am doing wrong, does anyone know why this is doing this?

Better yet, is there a better way to do this? add a row to the table at any position?

JQuery code;


    //get the button id to get the row
    var $id=this.id;
    var $totrecords;
    var $newrow;
    var $totalrowsadded;
    //get id of clicked button
    $id=$id.replace("add_", "");


    //store number of rows added

    //update record count

    var $html='<tr class="newrow"><td>'+$totrecords+'<button type="button" class="addRow" id="add_'+$totrecords+'">add</button></td><td><label for="ProductHeight'+$totrecords+'">height</label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'">width</label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'">List Price</label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'"/></td></tr>';

    alert('new row insert at '+$newrow);

    $('#productstable > tbody> tr:nth-child(' + $newrow + ')').after($html);    




My table looks like this:

<table id="productstable">
        <th>List price</th>

    <tr id="0">
        <td>0 :<button type="button" class="addRow" id="add_0">add</button></td>
        <td><label for="ProductHeight0">height</label><input name="data[Product][height0]" type="text" value="115" id="ProductHeight0"/></td>
        <td><label for="ProductWidth0">width</label><input name="data[Product][width0]" type="text" value="595" id="ProductWidth0"/></td>
        <td><label for="ProductPrice0">List Price</label><input name="data[Product][price0]" type="text" id="ProductPrice0"/></td>

    <tr id="1">
        <td>1 :<button type="button" class="addRow" id="add_1">add</button></td>
        <td><label for="ProductHeight1">height</label><input name="data[Product][height1]" type="text" value="140" id="ProductHeight1"/></td>
        <td><label for="ProductWidth1">width</label><input name="data[Product][width1]" type="text" value="295" id="ProductWidth1"/></td>
        <td><label for="ProductPrice1">List Price</label><input name="data[Product][price1]" type="text" id="ProductPrice1"/></td>

    <tr id="2">
        <td>2 :<button type="button" class="addRow" id="add_2">add</button></td>
        <td><label for="ProductHeight2">height</label><input name="data[Product][height2]" type="text" value="140" id="ProductHeight2"/></td>
        <td><label for="ProductWidth2">width</label><input name="data[Product][width2]" type="text" value="395" id="ProductWidth2"/></td>
        <td><label for="ProductPrice2">List Price</label><input name="data[Product][price2]" type="text" id="ProductPrice2"/></td>

    <tr id="3">
        <td>3 :<button type="button" class="addRow" id="add_3">add</button></td>
        <td><label for="ProductHeight3">height</label><input name="data[Product][height3]" type="text" value="140" id="ProductHeight3"/></td>
        <td><label for="ProductWidth3">width</label><input name="data[Product][width3]" type="text" value="495" id="ProductWidth3"/></td>
        <td><label for="ProductPrice3">List Price</label><input name="data[Product][price3]" type="text" id="ProductPrice3"/></td>




source to share

2 answers

You need a JQuery function append


$('#productstable TBODY').append($html); 


To add a line after the line containing the clicked button, use the following command:



The function closest

picks up the tree to find the nearest TR, then after

places it after it.



Here you can add a line after : (you need to use after

, not append


$(".button_class").closest("tr").after("<tr>... contents of row ...</tr>");


Here's this live example I wrote to demonstrate this.



All Articles