How to add new row dynamically in html table using jquery

Question

enter image description here

In my html table i have several input elements.I want to insert a new row of input elements at the end of the table, when ever the user hits enter button after filling last age column. I hope the picture will make things more clear.. Is it possible using jquery as i am new to jquery. Any kind of help will be appreciated..

At the *very* least *show us your HTML*. And, if possible, put together an [SSCCE](http://sscce.org/) demo of what you've got so far at [JS Fiddle](http://jsfiddle.net/) or similar. — David Thomas, Oct 20 '12 at 21:04
This question is a duplicate: http://stackoverflow.com/questions/171027/add-table-row-in-jquery. — iwein, Oct 20 '12 at 21:06

kabaros · Answer 1 · 2012-10-20T21:03:14.040

with some guessing of your table html structure, the general idea is like this:

$('input.last').keyup(function handleEnter(e){
    //enter hit on the input that has class last
    if(e.which == 13) {

       $(this).removeClass('last').unbind('keyup');

       $('.myTable').append('<tr><td><input name="input1"/></td><td><input name="input1"/> </td><td><input name="input1" class="last"/></td></tr>');

       $('.last').keyup(handleEnter);
    }
});

score 3 · Answer 2 · answered Oct 20 '12 at 21:08

Use your last row's last column as a selector in jquery. Fire it's onclick event and add a new tr in the end of table

code is here

 <script>
            $(document).ready(function () {

                $('#tableId tr:last td:last').click(function () {
                    var tr = $('this').closest('tr');
                    $('#tableId').append(tr);
                });
            });
        </script>

score 2 · Answer 3 · answered Oct 20 '12 at 20:59

Try http://datatables.net/

See this for basic adding:

http://datatables.net/release-datatables/examples/api/add_row.html

And this:

http://code.google.com/p/jquery-datatables-editable/wiki/AddingNewRecords

http://jquery-datatables-editable.googlecode.com/svn/trunk/addingrecords.html

score 0 · Answer 4 · answered Oct 20 '12 at 21:06

It is as simple as: $('#myTable tr:last').after('<tr>...</tr><tr>...</tr>'); with some caveats

I've created a little fiddle for you to experiment with: http://jsfiddle.net/fNW8T/

Personally I like a framework like AngularJS with an ngRepeat, or a just datatable. Doing this by hand is rather clunky.

How to add new row dynamically in html table using jquery

4 Answers4