Adding rows dynamically with jQuery

by

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!

More Related Contents:

  1. Stop form refreshing page on submit
  2. Clearing using jQuery
  3. Submitting a form on ‘Enter’ with jQuery?
  4. How to send a JSON object using html form data
  5. How to submit an HTML form without redirection
  6. Prevent form redirect OR refresh on submit?
  7. Drop-down box dependent on the option selected in another drop-down box
  8. How to prevent page from reloading after form submit – JQuery
  9. Property ‘submit’ of object # is not a function
  10. Best JavaScript solution for client-side form validation and interaction? [closed]
  11. Change the content of a div based on selection from dropdown menu
  12. jQuery Change event on an element – any way to retain previous value?
  13. Submit form after calling e.preventDefault()
  14. Trigger standard HTML5 validation (form) without using submit button?
  15. How do you limit options selected in a html select box?
  16. How can I get all a form’s values that would be submitted without submitting [duplicate]
  17. Trigger standard HTML validation (form) without using submit button? [duplicate]
  18. submit event does not fire if submit initiated programmatically
  19. Get content of span
  20. copying the value of a form’s file input field to another form’s input field
  21. How to decode HTML entities using jQuery?
  22. Intercept a form submit in JavaScript and prevent normal submission
  23. Creating a jQuery object from a big HTML-string
  24. How to format/tidy/beautify in JavaScript
  25. Is it OK to add your own attributes to HTML elements? [duplicate]
  26. Scale a div to fit in window but preserve aspect ratio
  27. How to save data from a form with HTML5 Local Storage?
  28. jQuery in Chrome returns “block” instead of “inline”
  29. How to write into a file (in user directory) using JavaScript?
  30. Test if an element can contain text

Leave a Comment