Question

得到简单的表格，我试图克隆并多次插入tbody元素。

问题：克隆的细胞不能正确对齐定义的列。（见jsfiddle）

不确定这里发生了什么。我必须使用table和tbody。

非常感谢任何帮助。

感谢。

<table class='assignees-form table border none'>
  <thead>
    <tr>
      <th>Assignee</th>
      <th>Start</th>
      <th>Due</th>
    </tr>
  </thead>
  <tbody class='assignee-template'>
    <tr>
      <td class='name'>Name</td>
      <td class='start'>Start</td>
      <td class='due'>Due</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class='assignees-controls'>
      <td><button class='add-button'>Add row</button></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

$('.add-button').click(function() {
    $('.assignee-template').clone()
            .removeClass('assignee-template').addClass('assignee')
            .insertBefore('.assignees-controls')
            .show();
});

FIDDLE

Answer 1

您正在tbody内（tfoot内tr之前）插入克隆的tfoot，而是在tbody之前插入tfoot。< / p>

$('.add-button').click(function() {
    $('.assignee-template').clone()
            .removeClass('assignee-template').addClass('assignee')
            .insertBefore('tfoot')
            .show();
});

＆＃13;

$('.add-button').click(function() {
  $('.assignee-template').clone()
    .removeClass('assignee-template').addClass('assignee')
    .insertBefore('tfoot')
    .show();
});

＆＃13;

table {
  width: 50%
}
td {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='assignees-form table border none'>
  <thead>
    <tr>
      <th>Assignee</th>
      <th>Start</th>
      <th>Due</th>
    </tr>
  </thead>
  <tbody class='assignee-template'>
    <tr>
      <td class='name'>Name</td>
      <td class='start'>Start</td>
      <td class='due'>Due</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class='assignees-controls'>
      <td>
        <button class='add-button'>Add row</button>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

＆＃13;

仅供参考：另外，为什么还需要克隆整个tbody？而只是克隆第一个tr并将其附加到tbody。

Answer 2

$('.add-button').click(function() {
  $('.table tbody').append($('.assignee-template tr').clone())//clone tr only
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='assignees-form table border none'>
  <thead>
    <tr>
      <th>Assignee</th>
      <th>Start</th>
      <th>Due</th>
    </tr>
  </thead>
  <tbody class='assignee-template'>
    <tr>
      <td class='name'>Name</td>
      <td class='start'>Start</td>
      <td class='due'>Due</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class='assignees-controls'>
      <td>
        <button class='add-button'>Add row</button>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

仅克隆tr。
使用.append()

描述：将参数指定的内容插入到匹配元素集中每个元素的末尾。

克隆tbody打破表列

2 个答案: