How to add new row dynamically in html table using jquery

Question

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

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

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.