只删除tbody上的tr

时间:2015-10-30 06:11:28

标签: javascript html

我有一个html,当然,它有一个表元素,在tbody中,我有一个删除表格行的按钮。

我已为该按钮分配了onclick=""功能。 (Function here)

如何只删除表格主体上的行( tbody ),而不删除表格中的行( thead )?

FIDDLE HERE

1 个答案:

答案 0 :(得分:0)

将正文行包裹到tbody元素,而您只能选择要删除的table tbody tr。使用jQuery,您可以$('table tbody tr').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>

    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>

    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>

    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>
  </tbody>
</table>
<button onClick="$('#table tbody tr').remove()">Remove all rows</button>