appendTo doesn't put my element where I want

Question

I use jQuery to add line in a table, with some input / select. I have a template line that is display : none, and for add a new line I duplicate this one and past it at the end of 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("");         
});

With IE8 it work pretty well, the line is add correctly in the tbody and is correctly display. But in FF, all the line is display in the first column and the rest of the table is empty... I think display : none / block have something to do with that but don't know why.

Answer 1

I would clone it, then remove the template class

If there is nothing else in the regle class, then no need for it since rows should not be display block anyway (thanks matt)

$("#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>

Answer 2

display: block is not valid on a table row. You instead need to apply display: table-row;

.template {
    display: none;
}

.regle {
    display: table-row;
}

As mentioned in the comments, you also need to clone() the element, otherwise you end up just moving 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>