Jquery, Clear / Empty alle Inhalte von tbody Element?

77

Ich dachte, das wäre ziemlich einfach, aber es scheint, dass die leere Methode nicht funktioniert, um einen Körper auszuräumen, den ich habe. Ich würde mich freuen, wenn jemand einen richtigen Weg kennt, ich möchte einfach alles löschen, was im Körper enthalten ist. Bisher versuche ich:

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

HTML:

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

HINWEIS: Ich versuche dies zu tun, um es in ein Plugin zu integrieren, das von einer anderen Person geschrieben wurde, die ich für ein Projekt verwenden soll. Ich generiere neue <tr><td>new data</td></tr>serverseitige und möchte nur in der Lage sein, die vorhandenen Tabellenzeilen zu löschen und sie bei AJAX-Rückrufen zu ersetzen.

javascript jquery html

— Rick
quelle

Haben Sie die jsFiddle ausprobiert, die ich gerade bereitgestellt habe?

— Marko

Vielen Dank für den Rat, ich werde es gleich versuchen

— Rick

Firefox ... in was hast du es versucht? Ich benutze Linux, also habe ich keinen IE installiert, ich nehme an, ich könnte es in Chrome versuchen, aber es muss trotzdem in allen funktionieren, damit dies funktioniert

— Rick

128

jQuery:

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

HTML:

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

Funktioniert für mich
http://jsfiddle.net/mbsh3/

— Marko
quelle

Ich denke, Chrom ist toleranter gegenüber solchen Dingen als Firefox

— Rick

Wenn Sie ein theadElement hinzufügen, stimmt definitiv etwas nicht . Firefox 78.0.2 jsfiddle.net/geLxhwsu

— jocull

Die Anhängefunktion war falsch. Die Syntax besteht $('<tr>')darin, ein neues Element zu erstellen und nicht $('tr') ! Dumm

— jocull

52

Sie haben das wahrscheinlich schon herausgefunden, aber für jemanden, der an diesem Problem festhält:

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

— Maxi Gis
quelle

10

Beispiel für Entfernen von Tabellenkopf oder Tabellenkörper mit 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>

Erweitern Sie das Snippet

— NuOne
quelle

1

$ ('# myTableId tbody'). empty (); Dies ist, wonach ich gesucht habe, wo ich keine ID für tbody element setzen wollte.

— Div Tiwari

2

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

Verwenden Sie diesen Befehl, um den Hauptteil dieser Tabelle zu löschen: $("#table_id tbody").empty()

Ich verwende jquery, um den Tabelleninhalt dynamisch zu laden, und verwende diesen Befehl, um den Body beim Aktualisieren zu löschen.

hoffe das hilft dir

— taotao.li
quelle

1

Sie können die remove()Funktion des folgenden Beispiels verwenden und die Tabelle erneut mit Tabellenkopf und Tabellenkörper erstellen

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

— Santosh Jadhav
quelle

0

Ohne Use ID ( <tbody id="tbodyid">) ist dies eine gute Möglichkeit, dieses Problem zu lösen

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

PS: Zum Entfernen einer bestimmten Zeilennummer wie im folgenden Beispiel

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

oder

$ ('# tr: n-tes Kind (2)'). remove ();

— Willie Cheng
quelle