Jquery，如何清空/删除tbody元素的所有内容？

Question

我以为这个问题很简单，但是似乎empty方法不能清空我的tbody。如果有人知道正确的方法，请帮忙告诉我。我想要删除tbody内的所有内容。到目前为止我尝试过：

$("#tbodyid").empty();

HTML：

<table>
<tbody id="tbodyid">
<tr><td>something</td></tr>
</tbody>
</table>

注意：我正在尝试这样做，以便与另一个插件集成，该插件是由其他人编写的，我正在被要求在项目中使用它。我正在服务器端生成新的 <tr><td>new data</td></tr>，并希望能够在 AJAX 回调中清除现有表格行并替换它们。

- Rick

---

你试过我刚提供的jsFiddle了吗？ - Marko

谢谢你的建议，我马上就会尝试。 - Rick

火狐浏览器...你在哪里试过它？我使用Linux，所以我没有安装IE，我想我可以尝试在Chrome中运行它，但是无论如何它都需要在所有浏览器中正常工作才能实现这个目标。 - Rick

Answer 1

jQuery：

$("#tbodyid").empty();

HTML：

<table>
    <tbody id="tbodyid">
        <tr>
            <td>something</td>
        </tr>
    </tbody>
</table>

没问题
http://jsfiddle.net/mbsh3/

- Marko

---

我认为Chrome对一些类似这样的东西更加宽容，可能比Firefox更好。 - Rick

当你添加thead元素时，一定出了些问题。Firefox 78.0.2 http://jsfiddle.net/geLxhwsu/ - jocull

添加函数有误。语法是 $('<tr>') 来创建新元素，而不是 $('tr')！我真傻 http://jsfiddle.net/efmyp3s0/ - jocull

Answer 2

你可能已经发现了这一点，但对于那些遇到这个问题的人：

$("#tableId > tbody").html("");

- Maxi Gis

Answer 3

$("table thead, table tbody").remove();

function removeTableHeader(){
  $('#myTableId thead').empty();
}

function removeTableBody(){
    $('#myTableId tbody').empty();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTableId'  border="1">
  <thead>
    <th>1st heading</th>
    <th>2nd heading</th>
    <th>3rd heading</th>
  </thead>  
  <tbody>
    <tr>
      <td>1st content</td>
      <td>1st content</td>
      <td>1st content</td>
    </tr>
    <tr>
      <td>2nd content</td>
      <td>2nd content</td>
      <td>2nd content</td>
    </tr>
    <tr>
      <td>3rd content</td>
      <td>3rd content</td>
      <td>3rd content</td>
    </tr>
  </tbody>
</table>
<br/>
<form>
  <input type='button' value='Remove Table Header' onclick='removeTableHeader()'/>
  <input type='button' value='Remove Table Body' onclick='removeTableBody()'/>
</form>

- noone

---

$('#myTableId tbody').empty(); 这正是我所需要的，我不想为tbody元素设置id。 - Mantra

Answer 4

$('#tableId').find("tr:gt(0)").remove();

这不会移除表头，而只会清除表格主体。

- aravind kumar eruventy

---

只有这个对我起作用了，我正在使用 Bootstrap 4 表格。 - Hadayat Niazi

Answer 5

        <table id="table_id" class="table table-hover">
          <thead>
            <tr>
             ...
             ...
            </tr>
          </thead>
        </table>

使用该命令清空表格主体内容：$("#table_id tbody").empty()

我使用jquery动态加载表格内容，并在刷新时使用该命令来清空主体部分。

希望这能对您有所帮助。

- taotao.li

Answer 6

你可以使用下面示例中的remove()函数，并重新构建包含表头和表体的表格。

$("#table_id  thead").remove();
$("#table_id  tbody").remove();

- Santosh Jadhav

Answer 7

不使用ID（<tbody id="tbodyid">），这是解决此问题的好方法

$('#table1').find("tr:gt(0)").remove();

提示：如要删除特定行，请按以下示例执行：

$('#table1 tr').eq(1).remove();

或者

$('#tr:nth-child(2)').remove();

- Willie Cheng