javascript - appendTo 没有将我的元素放在我想要的位置

Question

我使用 jQuery 在表格中添加行，带有一些输入/选择。我有一个显示的模板行:无，为了添加一个新行，我复制了这一行并将它放在我的表的 tbody 末尾。一些代码:

CSS:

.template {
    display: none;
}

.regle {
    display: block;
}

HTML :

<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("");         
});

对于 IE8，它工作得很好，该行在 tbody 中正确添加并正确显示。但是在 FF 中，所有行都显示在第一列中，而表格的其余部分是空的...我认为 display : none/block 与此有关，但不知道为什么。

Answer 1

我会克隆它，然后删除模板类

如果 regle 类中没有其他内容，则不需要它，因为无论如何行都不应该显示 block (感谢 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>