Home
> Uncategorized > jquery add a table row
jquery add a table row
I needed to add a table row to the bottom of a form. Jquery to the rescue. The form has a series of rows that record a start date and an end date. But the user can opt to create more input rows if they so choose, kicking off a little dhtml to extend the size of the form.
Here’s what I ended up using to add a row to the bottom of the table:
function onAddDateRange() {
var lastRow = $(‘#date_ranges tr:last’).clone();
var id = parseInt($(‘.id’, lastRow).html()) + 1;
$(‘[name]:first’, lastRow).attr(‘name’, ‘week_start_’ + id);
$(‘[name]:last’, lastRow).attr(‘name’, ‘week_end_’ + id);
$(‘.id’, lastRow).html(id);
$(‘#date_ranges’).append(lastRow);
}
http://www.mail-archive.com/jquery-en@googlegroups.com/msg22435.html
Categories: Uncategorized
jquery
TechDad 
ok i have a question about what you’ve done. I’m trying to do the same thing, though i have my table in a new iframe (the user looks at a schedule, clicks on an entry, and the people who have already volunteered come up in a popup). I want the user to decide to volunteer, click the volunteer button, and have an empty row get inserted. They would add their data, press Save (the former Volunteer button) and it would get saved to a mysql db. Here’s my jquery for the original popup:
…..
buttons: {
‘Volunteer’: function() {
onclick=add()
},
‘Cancel’: function() {
$(this).dialog(‘destroy’)
}
Then I”ve got your add function, modified for my data:
var lastRow =
$(‘#concessions tr:last’).clone();
var id = parseInt($(‘.id’, lastRow).html()) + 1;
$(‘[firstname]:firstname’, lastRow).attr(‘firstname’, ‘week_start_’ + id);
$(‘[lastname]:lastname’, lastRow).attr(‘lastname’, ‘week_end_’ + id);
$(‘.id’, lastRow).html(id);
$(‘#concession’).append(lastRow);
};
Problem is, nothing is added – and there are no js errors anywhere. Can you help me find what I’m doing wrong?
cool. thank you for your great share!
i have attached my code(insert mysql)
function onAddDateRange(div,message_id) {
$.ajax({
type: “POST”,
url: “update_table.php?action=addRow”,
data: ‘messase_id=’ + div,
success: function(msg) {
$(“.loss”).html(msg);
}
});
var lastRow = $(‘#table1 tr:last’).clone();
var id = parseInt($(‘.id’, lastRow).html()) + 1;
$(‘[name]:first’, lastRow).attr(‘name’, ‘week_start_’ + id);
$(‘.id’, lastRow).html(id);
$(‘#table1’).append(lastRow);
}
Similar row manipulation script here http://www.dougnorfolk.com.au/website-design-forster-notes/jquery-add-table-row-with-ajax/
Hi there very cool blog!! Man .. Beautiful .. Amazing ..
I’ll bookmark your blog and take the feeds also?
I am satisfied to find a lot of helpful information right here
within the post, we’d like develop extra strategies in this regard, thanks for
sharing. . . . . .