CODEWITHSUNDEEP
phpjquery
Rick
Rick

Reputation: 441

PHP / JQuery clone hidden table row, add to end of table

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?

Upvotes: 0

Views: 1148

Answers (2)

smithml
smithml

Reputation: 141

A follow up note - if you don't remove the id #hiddenrow from the newly cloned row, you end up with more than one rows with the same id - see here: div class vs id

Upvotes: 1

Kelvin
Kelvin

Reputation: 5317

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/

Upvotes: 2

Related Questions