AppendTo doesn't put my item where I want

Question

I am using jQuery to add a row to a table using input / select. I have a pattern row that is displayed: none, and to add a new row, I duplicate it and pass it at the end of the tbody of my table. Some code:

CSS:

.template { display: none; } .regle { display: block; } 

PHTML:

 <table class='w100' cellspacing='0' cellpadding='0' id='listTable'> <thead> <tr> <th>foo</th> <th>bar</th> <th>foobar</th> </tr> </thead> <tbody> <tr class="template"> <td> <?php echo $this->form->foo->renderViewHelper(); ?> <?php echo $this->form->foo->renderErrors(); ?> </td> [ ... ] </tr> </tbody> </table> 

jQuery:

 $("#ajout_regle").click(function(){ $( ".template" ) .clone() // Edit : I forgort it when I copy / past my code ! .first() .appendTo( "#listTable tbody" ) .addClass('regle') .find("input[type='text']").val(""); }); 

In IE8, it works very well, the line is correctly added to it and displayed correctly. But in FF, the entire row is displayed in the first column, and the rest of the table is empty ... I think the display: none / block has something to do with it, but I don’t know why.

Answer 1

display: block not valid in a table row. Instead, you need to apply display: table-row ;

 .template { display: none; } .regle { display: table-row; } 

As mentioned in the comments, you also need the clone() element, otherwise you just move it.

 $("#ajout_regle").click(function(){ $( ".template" ).clone() .appendTo( "#listTable tbody" ) .removeClass("template").addClass('regle') .find("input[type='text']").val(""); }); 

 .template { display: none; } .regle { display: table-row; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="ajout_regle">Ajout</button> <table class='w100' cellspacing='0' cellpadding='0' id='listTable'> <thead> <tr> <th>foo</th> <th>bar</th> <th>foobar</th> </tr> </thead> <tbody> <tr> <td> Bla </td> <td> Bla </td> <td> Bla </td> </tr> <tr class="template"> <td> Bla </td> <td> Bla </td> <td> Bla </td> </tr> </tbody> </table> 

Answer 2

I would clone it and then delete the template class

If there is nothing else in the regle class, then there is no need for it, since the lines should not be displayed anyway (thanks matte)

 $("#ajout_regle").click(function(){ $( ".template" ) .clone() .appendTo( "#listTable tbody" ) .removeClass("template") // .addClass('regle') .find("input[type='text']").val(""); }); 

 .template { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="ajout_regle">Ajout</button> <table class='w100' cellspacing='0' cellpadding='0' id='listTable'> <thead> <tr> <th>foo</th> <th>bar</th> <th>foobar</th> </tr> </thead> <tbody> <tr class="template"> <td> Bla </td> </tr> </tbody> </table>