limpar mesa jquery

103

Eu tenho uma tabela HTML preenchida com várias linhas.

Como posso remover todas as linhas da tabela?

Aprendendo
fonte

Respostas:

162

Use .remove ()

$("#yourtableid tr").remove();

Se você quiser manter os dados para uso futuro, mesmo depois de removê-los, você pode usar .detach ()

$("#yourtableid tr").detach();

Se as linhas são filhos da tabela, você pode usar o seletor filho em vez do seletor descendente, como

$("#yourtableid > tr").remove();
Rahul
fonte
16
cuidado com o último: a maioria dos navegadores adiciona um tbodyelemento implícito ao redor dos trelementos.
nickf
96

Se você deseja limpar os dados, mas manter os cabeçalhos:

$('#myTableId tbody').empty();

A tabela deve ser formatada desta maneira:

<table id="myTableId">
    <thead>
        <tr>
            <th>header1</th><th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td><td>data2</td>
        </tr>
    </tbody>
</table>
HoffZ
fonte
está funcionando, mas está removendo o próprio 'tbody' com todo o 'tr' dentro dele.
Hakan Fıstık de
Você está certo, @HakamFostok.
Editei
41

Um pouco mais rápido do que remover cada um individualmente:

$('#myTable').empty()

Tecnicamente, isso irá remover thead, tfoote tbodyelementos também.

nickf
fonte
27

Eu precisava disso:

$('#myTable tbody > tr').remove();

Ele exclui todas as linhas, exceto o cabeçalho.

Bumptious Q Bangwhistle
fonte
12

A opção nuclear:

$("#yourtableid").html("");

Destrói tudo dentro de #yourtableid. Tenha cuidado com seus seletores, pois isso destruirá qualquer html no seletor que você passar!

KevinDeus
fonte
2
1 para nuclear :). Mas deve entender que não é o estilo 'melhor' :) Eu não recomendo em geral
Budda
ri muito. Acordado. Eu usei esse método específico no passado para agilizar e resolver situações difíceis . Ele tem algum uso válido no domínio dos aplicativos JQuery.
KevinDeus
11
$("#employeeTable td").parent().remove();

Isso irá remover todos os que trtêm tdcomo filho. ou seja, todas as linhas, exceto o cabeçalho, serão excluídas.

Mrinmoy Sen
fonte
Este é o único que funciona para mim. Excluir tudo, exceto o cabeçalho ...
Elbert Villarreal
6

Isso removerá todas as linhas pertencentes ao corpo, mantendo assim os cabeçalhos e o corpo intactos:

$("#tableLoanInfos tbody tr").remove();
James Cooke
fonte
1
<table id="myTable" class="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody id="tblBody">

    </tbody>
</table>

E remover:

$("#tblBody").empty();
miragessee
fonte
0
  $('#myTable > tr').remove();
disseesh kilaru
fonte
0

Ter uma tabela como esta (com um cabeçalho e um corpo)

<table id="myTableId">
    <thead>
    </thead>
    <tbody>
   </tbody>
</table>

remova todos os tr tendo um pai chamado tbody dentro do #tableId

$('#tableId tbody > tr').remove();

e ao contrário, se você quiser adicionar à sua mesa

$('#tableId tbody').append("<tr><td></td>....</tr>");
Hichamkazan
fonte