3

Ive been working on a solution to being able to insert a row to a html table. Its been quite tricky. Ive found something that works but only for the first "insert". I cant figure out what im doing wrong.

Ive a basic table with 3 colums each table has a button to allow the insertion of a row between 2 rows. Ive searhed on this site for a solution and got a jquery solution that works i.e when i press the button it adds the row where i want it. But when i add another row after where i inserted the last row, the row is inserted 1 position back, the next time i press the button its inserted 2 rows back etc. I cant figure out what im doing wrong any one know why its doing this?

Even better is there a better way to do this? i.e add a row into a table at any postion?

JQuery code;

<script>
$(document).ready(function(){
    $(".addRow").click(function(event){

    //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_", "");

    $totrecords=document.getElementById('totalrecords').value;
    $totrecords++;

    //store number of rows added
    $totalrowsadded=document.getElementById('totalrowsadded').value;
    $totalrowsadded++;
    document.getElementById('totalrowsadded').value=$totalrowsadded;

    //update record count
    document.getElementById('totalrecords').value=$totrecords;

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


    $newrow=parseInt($id)+1;
    alert('new row insert at '+$newrow);

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


});
});

</script>

My table looks like this;

<table id="productstable">
    <tr>
        <th>Insert</th>
        <th>Height</th>
        <th>Width</th>
        <th>List price</th>
    </tr>

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

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

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

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

    </tbody>
</table>

2 Answers 2

4

You want the JQuery append function:

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

To add a row after the row containing the button that was clicked, use this:

$(this).closest('TR').after($html);

The closest function walks up the tree to find the nearest TR, then after will put it after it.

6
  • It's more like some kind of sorted list. You maxy want to take a look at the HTML code.
    – Smamatti
    Mar 14, 2012 at 15:52
  • im using cakephp 2.0 so thats why the output is like that. Mar 14, 2012 at 15:58
  • No, it should go to the end (inserts as the last child), see the documentation: api.jquery.com/append
    – Jon Grant
    Mar 14, 2012 at 16:04
  • i need to add a row at a certain position in the table i.e where the button is clicked. Mar 14, 2012 at 16:08
  • Use the closest function, see above.
    – Jon Grant
    Mar 14, 2012 at 16:11
4

Here's how you can append after a row: (you need to use after and not append)

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

Heres a live example that I wrote to demonstrate this.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.