Javascript 附录不'；不要把我的元素放在我想要的地方

我使用jQuery在表中添加行，并进行一些输入/选择。我有一个模板行display:none，为了添加新行，我复制了这一行，并在我的表的tbody的末尾经过它。一些代码：

CSS:

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>

---

在IE8中，它工作得非常好，在tbody中正确添加了行，并且显示正确。但在FF中，所有行都显示在第一列中，表的其余部分为空。。。我认为display:none/block与此有关，但不知道原因。

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

如果regle类中没有其他内容，那么就不需要它，因为行无论如何都不应该是显示块（谢谢matt）

$（“#ajout_regle”）。单击（函数（）{
$（“.template”）
.clone（）
.appendTo（“#列表表主体”）
.removeClass（“模板”）/.addClass（'regle'））
.find（“输入[type='text']”）.val（“”）；
});
.template{
显示：无；
}

阿约
福
酒吧
福巴
布拉
显示：块在表行上无效。相反，您需要应用
显示：表行

.template {
    display: none;
}

.regle {
    display: table-row;
}

如注释中所述，您还需要
clone（）
该元素，否则最终只需移动它


$（“#ajout_regle”）。单击（函数（）{
$（“.template”）.clone（）
.appendTo（“#列表表主体”）
.removeClass（“模板”）.addClass（“regle”）
.find（“输入[type='text']”）.val（“”）；
});
.template{
显示：无；
}
雷格尔先生{
显示：表格行；
}

阿约
福
酒吧
福巴
布拉
布拉
布拉
布拉
布拉
布拉
您不需要先克隆它吗？然后删除模板类？您提供的代码在我的ff 31.2.0和chrome 39上运行良好，但您必须注意，您不是在附加克隆，而是在表中移动原始模板哇，对不起！我做了一个.clone（），但当我在这里复制/跳过我的代码时，我忘记了它：-/Hmm，克隆是我所关注的，所以我最初没有注意到块问题
$("#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("");         
});

.template {
    display: none;
}

.regle {
    display: table-row;
}