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

Advertisements
Categories: Uncategorized Tags:
  1. Kathy
    June 23, 2008 at 3:22 pm

    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?

  2. February 21, 2010 at 12:24 am

    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);

    }

  3. December 5, 2011 at 4:15 am
  4. September 12, 2014 at 6:10 am

    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. . . . . .

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: