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

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?

How about `.removeAttr('id')` as that's probably making it hidden / non-displaying? All rules that make `#hiddenrow` hidden... might apply... — Wrikken, Nov 09 '12 at 00:29

score 2 · Accepted Answer · answered Nov 09 '12 at 00:34

2

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/

answered Nov 09 '12 at 00:34

Kelvin

5,227
1
23
36

After clicking the button and having the new row appear then quickly disappear, I check the source and it's not there either. – Rick Nov 09 '12 at 00:45
Firebug allows you to set a breakpoint when a child is added or removed - that should help you track down what's removing the rows. Inspect the table, then right click on it in Firebug's DOM tab and click 'Break on Child Addition or Removal' – Kelvin Nov 09 '12 at 00:47
I think I'm narrowing it down. My table is wrapped by a form. When the form is submitted, it processes it, then repopulates the form with new database data. Is there something can add to the JQuery to keep the button from submitting my form? – Rick Nov 09 '12 at 01:30
Yep, `event.preventDefault()` will take care of that - see http://jsfiddle.net/kelervin/4zrC7/3/ – Kelvin Nov 09 '12 at 01:34
I really appreciate your help Kelvin! And everyone else that offered suggestions! – Rick Nov 09 '12 at 01:43
Not a problem - glad to help! :) – Kelvin Nov 09 '12 at 01:50
Another issue within the same topic; First, I had to move the #hiddenrow outside the parent table. It was getting picked up by the form as a blank record. Now, I need to set a value for one of the inputboxes in the cloned row. How would I set that? I have edited my original post with my current code. Thanks! – Rick Nov 09 '12 at 04:05
Use `find()`, `end`, and `val()` on the cloned row: `...clone().find('input[name="myinput"]').val('newvalue').end().show()...` – Kelvin Nov 09 '12 at 18:39

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

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

edited May 23 '17 at 11:43

Community

1
1

answered Nov 09 '12 at 00:56

smithml

141
3

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

2 Answers2