How to add new row dynamically in html table using jquery
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..
有一些猜测你的表格html结构，总的想法是这样的：
$('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);
}
});
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
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>