Javascript Jquery,清除/清空 tbody 元素的所有内容?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4982846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 15:04:34  来源:igfitidea点击:

Jquery, Clear / Empty all contents of tbody element?

javascriptjqueryhtml

提问by Rick

I thought this would be rather simple but it seems the empty method is not working to clear out a tbody that I have. I would appreciate if anyone knows a proper way to do this, I just want to delete everything contained within the tbody. So far I am trying:

我认为这会相当简单,但似乎空方法无法清除我拥有的 tbody。如果有人知道这样做的正确方法,我将不胜感激,我只想删除 tbody 中包含的所有内容。到目前为止,我正在尝试:

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

HTML:

HTML:

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

NOTE: I am trying to do this to integrate with a plugin written by someone else that I am being made to use for a project. I am generating new <tr><td>new data</td></tr>server-side and want to just be able to wipe out the existing table rows and replace them on AJAX callbacks.

注意:我试图这样做是为了与其他人编写的插件集成,我被用于一个项目。我正在生成新的<tr><td>new data</td></tr>服务器端,并希望能够清除现有的表行并在 AJAX 回调上替换它们。

回答by Marko

jQuery:

jQuery:

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

HTML:

HTML:

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

Works for me
http://jsfiddle.net/mbsh3/

对我
有用 http://jsfiddle.net/mbsh3/

回答by Maxi Gis

You probably have found this out already, but for someone stuck with this problem:

您可能已经发现了这一点,但对于遇到此问题的人来说:

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

回答by NuOne

Example for Remove table header or table body with jquery

使用 jquery 删除表头或表体的示例

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>

回答by taotao.li

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

use this command to clear the body of that table: $("#table_id tbody").empty()

使用此命令清除该表的主体: $("#table_id tbody").empty()

I use jquery to load the table content dynamically, and use this command to clear the body when doing the refreshing.

我使用jquery动态加载表格内容,并在刷新时使用此命令清除正文。

hope this helps you.

希望这对你有帮助。

回答by Santosh Jadhav

you can use the remove()function of the example below and build table again with table head, and table body

您可以使用remove()下面示例的功能并使用表头和表体再次构建表

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

回答by Willie Cheng

Without use ID (<tbody id="tbodyid">) , it is a great way to cope with this issue

不使用 ID ( <tbody id="tbodyid">) ,这是处理这个问题的好方法

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

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

PS:To remove specific row number as following example

PS:删除特定行号如下例

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

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

or

或者

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

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