Insert row dynamically in html using jquery?

Question

I am using below the code to insert a row dynamically in html table.

var newRow = jQuery('<tr><td><input style="width:200px" type="text" name="designation' +
counter + '"/></td><td><input style="width:200px" type="text" id="start_date'+ counter +'" name="start_date' +
        counter + '"/></td><td><input style="width:200px" id="end_date'+ counter +'" type="text" name="end_date' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);

This code works fine. The row is always inserted as last row. But i need to insert the row just before the last row. I mean if the table has 3 rows, then new row should be in 3rd place the row which was there in 3rd place should be moved to last. How can i achieve this? Please help me.

Thanks!

palaѕн · Accepted Answer · 2013-08-06 14:16:14Z

4

You can use the .before() method here like :

jQuery('table.authors-list tr:last').before(newRow);

tr:last will get the last row in the authors-list table.
.before() will insert the new row before the last one.

answered Aug 6, 2013 at 14:16

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brendan Bullen · Accepted Answer · 2013-08-06 14:21:18Z

0

$('table tr:last').before($('<tr>....</tr>'))

edited Aug 6, 2013 at 14:21

Brendan Bullen

11.8k1 gold badge33 silver badges40 bronze badges

answered Aug 6, 2013 at 14:20

xborus

134 bronze badges

Collectives™ on Stack Overflow

Insert row dynamically in html using jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related