Question

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

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

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

Answer 1

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

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

＆＃13;

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

＆＃13;

.template {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

display: block在表格行无效。您需要应用display: table-row;

.template {
    display: none;
}

.regle {
    display: table-row;
}

正如评论中所提到的，你还需要clone()元素，否则你最终只是移动它。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

appendTo并没有把我的元素放在我想要的地方

2 个答案: