Adding rows dynamically with jQuery

forms, html, javascript, jquery

Solution

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!

Problem

I'm building a form where I need multiple optional inputs, what I have is basically this: Every time a user presses the plus button a new row of form inputs should be added to the form, how can I do this in jQuery? Also, is it possible to automatically add a new row when all rows (or just the last row, if it's easier / faster) are filled? That way the user wouldn't need to press the plus button. I'm sorry for asking maybe such a basic question but I'm still very green with jQuery, I could do this with PHP but I'm sure Javascript / jQuery plays a more appropriate role here. @alex: ``` <!DOCTYPE html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $form = $('#personas'); $rows = $form.find('.person'); $('a#add').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); }); </script> </head> <body> <form id="personas" name="personas" method="post" action=""> <table width="300" border="1" cellspacing="0" cellpadding="2"> <tr> <td>Name</td> <td>More?</td> </tr> <tr class="person"> <td><input type="text" name="name[]" id="name[]" /></td> <td><a href="#" id="add">+</a></td> </tr> </table> </form> </body> </html> ```

Original source