jQuery tips and tricks: ‘Add more’ functionality in a table June 23, 2009

Usually we have ‘Add more’ link on the forms. For example, on the project I’m working on right now there is registration form and user with Advanced package can create a few accounts. So we have ‘Add more’ link that should add one more row with Name, Email and Password for adding another account. Because we use table in HTML for placing data fields, new row will be TR actually. And there is a little trick to add it.

Here you are:

$(function() {
  $("#add_more").click(function() {
    $("form table tr:last").after(‘<tr>…</tr>’);
  });
});

At first, I add click event handler on ‘Add more’ link. In even handler declaration I find the last TR block in the table. Then use after() method to add new TR row.

 
Leave a Reply