My name is Alexander Kleshchevnikov. I have been working as a professinal web application developer since 2002. I believe in simple intelligence from server technologies to front-end development. Now I run my own web development consulting company in Ukraine. You can find 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>’);
});
});
$("#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