ansaurus

Question

Answer 1

+1 A:

Untested. Modify to suit:

$form = $('#my-form');

$rows = $form.find('.person-input-row');

$('button#add-new').click(function() {

    $rows.find(':first').clone().insertAfter($rows.find(':last'));

    $justInserted = $rows.find(':last');
    $justInserted.hide();
    $justInserted.find('input').val(''); // it may copy values from first one
    $justInserted.slideDown(500);


});

This is better than copying innerHTML because you will lose all attached events etc.

alex 2010-01-27 06:45:16

Thanks. That makes sense but I still can't get it to work, check my edited question.

Alix Axel 2010-01-27 07:24:54

This will clone what is inside the tr, in this case the td's and insert td's after the last one. close but not quite right.

Rippo 2010-01-27 08:51:58

It was alright up until the edit :) Sorry, I went out after posting and didn't have a chance to make edits.

alex 2010-01-27 23:06:00

Answer 2

+2 A:

This will get you close, the add button has been removed out of the table so you might want to consider this...

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
          $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
          return false;
        });
    });
</script>

HTML markup looks like this

  <a  id="add">+</a></td>
  <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">
  <tbody>
    <tr>
      <td>Name</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name" id="name" /></td>
    </tr>
    </tbody>
  </table>

EDIT To empty a value of a textbox after insert..

    $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
    $('#mytable tbody>tr:last #name').val('');
    return false;

EDIT2 Couldn't help myself, to reset all dropdown lists in the inserted TR you can do this

$("#mytable tbody>tr:last").each(function() {this.reset();});

I will leave the rest to you!

Rippo 2010-01-27 07:55:56

That works fine, thanks. Now, is there any way to reset all inputs / selects / textareas / etc to their original state in the newly created row?

Alix Axel 2010-01-27 08:05:21

ansaurus

tags:

views:

answers:

Adding rows dynamically with jQuery

@alex:

related questions