Question

I’ve got a table, with the first TR hidden (style=”display:none;”). I have a button at the top of the table to allow users to add a new row to the table. When clicked, I would like the hidden row to be cloned and added to the bottom of of the table. I’m thinking this is the best way as I can pre-format the row to contain exactly what I need in the NEW row.

Here is the JQuery I have so far:

$(document).ready(function($) {
   $(".dispadd").click(function() {
      $('#hiddenrow').clone().show().appendTo( $('#hiddenrow').parent() );
   });
});

It appears to add the row as expected, but within a second, the new row disappears.
Anyone see what I’m doing wrong?

_____ LATEST CODE _______

$(document).ready(function($) {
    $(".dispadd").click(function(event) {
        event.preventDefault();
        $('#hiddenrow')
            .clone()
                .removeAttr('id')
                .show()
                .appendTo( $('#disptable').after().show() 
        );
    });
});

I had to modify it a bit after having to move the #hiddenrow outside the parent table. How do I set the value of one of the inputboxes in the cloned row?

Answer 1

Your code works fine, so some other code on your page must be hiding the new rows. Most likely this is because you aren’t removing #hiddenrow from the cloned rows – see below:

$(document).ready(function($) {
    $(".dispadd").click(function() {
        $('#hiddenrow')
            .clone()
                .removeAttr('id')
                .show()
                .appendTo( $('#hiddenrow').parent() );
    });
});​

Demo: http://jsfiddle.net/kelervin/4zrC7/2/