Exclua todas as linhas em uma tabela HTML


99

Como posso excluir todas as linhas de uma tabela HTML, exceto o <th>usando Javascript, e sem percorrer todas as linhas da tabela? Eu tenho uma tabela muito grande e não quero congelar a IU enquanto estou percorrendo as linhas para excluí-las


2
Deve haver um loop, não há nenhum comando "delete-multiple-elements", o método removeChildleva apenas um único elemento DOM.
Šime Vidas

@SLaks presumindo que ele se referia à linha contendo as linhas do cabeçalho
Eonasdan

Respostas:


92

Mantenha a <th>linha em a <thead>e as outras linhas em a <tbody>e substitua <tbody>por uma nova e vazia.

ie

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)

Facilmente a solução mais eficiente, desde que o desenvolvedor JavaScript tenha permissão para modificar o HTML.
Blazemonger 01 de

1
Cuidado, se você for substituir o tbody usando a propriedade innerHTML, não funcionará no IE, mas há uma solução alternativa.
aziz punjani 01 de

2
@Eonasdan - Isso é um tanto subjetivo. Existem muitas bibliotecas por aí (minha preferência pessoal seria usar o YUI 3 atualmente) caso alguém com esse problema queira resolvê-lo com uma delas. Os princípios serão os mesmos, não importa qual grande pedaço de código de terceiros você deseja incluir.
Quentin,

3
Necromante isso ... o que há de errado com: document.getElementById('tbody').innerHTML = '';
Trees4theForest

2
@ Trees4theForest Isso funciona bem para mim. Provavelmente não foi possível na época do OP.
Mabu

94

isso removerá todas as linhas:

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

40
Se você não quiser deletar o cabeçalho: $ ("# table_of_items tbody tr"). Remove ();
TTT de

1
Muito boa resposta simples. Eu usei no meu CoffeeScript - I like one-line-solutions$("tbody#id tr").remove()
n2o

Acho que esta é uma resposta melhor do que a aceita, embora dependa se você deseja usar JQuery ou não. Mas de alguma forma .remove não funcionou no Chrome.
Milind Thakkar,

TTT, use as tags <thead><th></th> </thead> para criar o cabeçalho da tabela. Então $ ("# table_of_items tr"). Remove (); funciona bem para você, porque remove apenas as marcas <tr>.
Kate

TTT, adicione seu comentário à resposta. Sua resposta é perfeita!
Khorshid

57

Muito bruto, mas isso também funciona:

var Table = document.getElementById("mytable");
Table.innerHTML = "";

9
Infelizmente, isso não mantém os cabeçalhos <th> como o OP pede.
JoSeTe4ever

1
Isso acontecerá se eles colocarem seus cabeçalhos <th> aninhados em a <thead>. Esta é provavelmente a maneira mais sintaticamente correta de construir a tabela.
Jon Black

Funciona bem. Eu acho que isso é adequado apenas para pessoas como eu, que criou cabeçalho de tabela, linha, célula, tbody tudo em JQuery.
Shamsul Arefin Sajib

Isso funcionou bem apenas para limpar o html dentro de um tbody :)
RudyOnRails

var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; bodyRef.innerHTML = '';
Limpei

17

Esta é uma questão antiga, mas recentemente tive um problema semelhante.
Eu escrevi este código para resolver isso:

var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x>0; x--) {
   elmtTable.removeChild(tableRows[x]);
}

Isso removerá todas as linhas, exceto a primeira.

Felicidades!


9
mais curto (e mais rápido): var rowCount = myTable.rows.length; while (- rowCount) myTable.deleteRow (rowCount);
Petar

O código no comentário acima não remove a primeira linha
PrfctByDsgn

16

Pontos a serem observados em Cuidado com os erros comuns :

Se o seu índice inicial for 0 (ou algum índice inicial), então, o código correto é:

var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
}

NOTAS

1. o argumento para deleteRow é corrigido,
isso é necessário, pois, conforme excluímos uma linha, o número de linhas diminui.
ie; no momento em que i atinge (rows.length - 1), ou mesmo antes que a linha já tenha sido excluída, então você terá algum erro / exceção (ou um silencioso).

2. o rowCount é obtido antes do loop for começar, pois à medida que excluímos "table.rows.length", ele continuará mudando, então, novamente, você tem algum problema, que apenas linhas pares ou ímpares são excluídas.

Espero que ajude.


10

Supondo que você tenha apenas uma tabela para que possa referenciá-la apenas com o tipo. Se você não quiser excluir os cabeçalhos:

$("tbody").children().remove()

de outra forma:

$("table").children().remove()

espero que ajude!


7

Eu precisei excluir todas as linhas, exceto a primeira e a solução postada por @strat, mas isso resultou em uma exceção não detectada (referenciando Node no contexto onde ele não existe). O seguinte funcionou para mim.

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
   myTable.deleteRow(x);
}

7

Se você pode declarar um IDfor, tbodypode simplesmente executar esta função:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

5

isso funcionaria com a exclusão de iteração na tabela HTML no nativo

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})

5

o código abaixo funciona muito bem. Ele remove todas as linhas, exceto a linha de cabeçalho. Portanto, este código realmente t

$("#Your_Table tr>td").remove();

3
espere, esta é a resposta do jQuery, a pergunta original não perguntou especificamente para a solução do jQuery!
revelt

4

Assing alguns id para tbody tag. ie. Depois disso, a linha a seguir deve reter o cabeçalho / rodapé da tabela e remover todas as linhas.

document.getElementById("yourID").innerHTML="";

E, se você quiser que toda a tabela (cabeçalho / linhas / rodapé) apague, defina o id no nível da tabela, ou seja


3

Se você não deseja remover the apenas deseja remover as fileiras de dentro, está funcionando perfeitamente.

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}

3

Que tal agora:

Quando a página for carregada pela primeira vez, faça o seguinte:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

Então, quando você quiser limpar a mesa:

myTable.innerHTML=myTable.oldHTML;

O resultado será a (s) sua (s) linha (s) de cabeçalho, se você só começou com isso, o desempenho é dramaticamente mais rápido do que o loop.


solução muito elegante
revelt

2

Se você tiver muito menos <th>linhas do que não <th>linhas, poderá coletar todas as <th>linhas em uma string, remover a tabela inteira e escrever <table>thstring</table>onde a tabela costumava estar.

EDIT: Onde, obviamente, "thstring" é o html para todas as linhas de <th>s.


1
Em vez disso, colete os <th>s como elementos DOM, limpe o innerHTML da tabela e anexe os <th>s a ele novamente.
entonio 01 de

Cuidado, se você for substituir clear tbody usando a propriedade innerHTML, isso não funcionará no IE, mas há uma solução alternativa.
aziz punjani 01 de

2

Isso funciona no IE sem precisar declarar um var para a tabela e excluirá todas as linhas:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}

1

este é um código simples que acabei de escrever para resolver isso, sem remover a linha do cabeçalho (a primeira).

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

Espero que funcione para você!!.


1

Atribua um id ou uma classe para o seu corpo.

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

Você pode nomear seu id ou classe como quiser, não necessariamente #tbodyIdou .tbodyClass.


0

Apenas limpe o corpo da mesa.

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

2
html () é na verdade um método jQuery.
carlodurso

-1

const table = document.querySelector ('table'); table.innerHTML === ''? null: table.innerHTML = ''; o javascript acima funcionou bem para mim. Ele verifica se a tabela contém dados e, em seguida, limpa tudo, incluindo o cabeçalho.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.