How to add new row dynamically in html table using jquery [closed]

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>