jquery - maneira mais rápida de remover todas as linhas de uma tabela muito grande

93

Achei que essa seria uma maneira rápida de remover o conteúdo de uma tabela muito grande (3.000 linhas):

$jq("tbody", myTable).remove();

Mas está demorando cerca de cinco segundos para ser concluído no Firefox. Estou fazendo algo estúpido (além de tentar carregar 3.000 linhas em um navegador)? Existe uma maneira mais rápida de fazer isso?

javascript jquery dom

— morgancodes
fonte

212

$("#your-table-id").empty();

Isso é o mais rápido que você consegue.

— Seb
fonte

Hmmm. Frustrante. Eu acho que excluir seria muito mais rápido do que inserir. Meio que me dá vontade de fazer coisas realmente feias, como simplesmente esconder a mesa e criar uma nova quando eu quiser atualizá-la.

— morgancodes

10

Sim, bem ... HTML não foi criado para mostrar 3k linhas em uma página :) Você não consegue pensar em alguma solução paginada? Isso tornaria tudo muito mais rápido. Claro que exigiria mais trabalho, mas será uma experiência do usuário muito mais rica.

— Seb,

7

Este é bom. O problema é que isso também removerá os cabeçalhos das tabelas.

— isuru

2

remove cabeçalhos :(

— Sandeep Kushwah

4

Isso removerá tudo na tabela, incluindo cabeçalhos. Presumo que @morgancodes deseja remover o conteúdo, também conhecido como as linhas, não os cabeçalhos. Para quem encontra isso mais tarde, a solução seria $('#mytable tbody').empty();. Isso garante que apenas o corpo seja esvaziado.

— OmniOwl

82

É melhor evitar qualquer tipo de loops, apenas remova todos os elementos diretamente desta forma:

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

— Gradosevic
fonte

6

html("")ligações empty()internas

— Emile Bergeron

8

Boa solução para mim porque não remove o cabeçalho de uma tabela. Obrigado!

— Daria

@Daria usa os seletores ao máximo, isso manterá seus cabeçalhos no lugar: $ ('table tbody'). Empty ();

— Dani,

qual é a diferença entre usar ("#mytable> tbody") e ("#mytable tbody").

— eaglei22

1

Se você tiver uma tabela aninhada em uma linha de sua tabela, também removerá essas tags tbody. Se você tiver apenas uma mesa, não deve ser muito diferente.

— Shiroy

6

Usar desanexar é magnitudes mais rápidas do que qualquer uma das outras respostas aqui:

$('#mytable').find('tbody').detach();

Não se esqueça de colocar o elemento tbody de volta na tabela, pois a separação o removeu:

$('#mytable').append($('<tbody>'));

Observe também que, ao falar, a $(target).find(child)sintaxe de eficiência é mais rápida do que $(target > child). Por quê? Chiar!

Tempo decorrido para esvaziar 3.161 linhas da tabela

Usando o método Detach () (conforme mostrado no meu exemplo acima):

Firefox: 0.027s
Chrome: 0.027s
Edge: 1.73s
IE11: 4.02s

Usando o método empty ():

Firefox: 0.055s
Chrome: 0.052s
Edge: 137.99s (também pode estar congelado)
IE11: congela e nunca retorna

— Desenhou
fonte

4

$("#myTable > tbody").empty();

Não vai tocar nos cabeçalhos.

— AlexCodeKeen
fonte

3

Dois problemas que posso ver aqui:

Os métodos empty () e remove () do jQuery realmente fazem um bom trabalho. Consulte o Perfil de Chamada de Função JavaScript de John Resig para saber o motivo.
A outra coisa é que para grandes quantidades de dados tabulares você pode considerar uma biblioteca de datagrid como o excelente DataTables para carregar seus dados em tempo real do servidor, aumentando o número de chamadas de rede, mas diminuindo o tamanho dessas chamadas. Eu tinha uma tabela muito complicada com 1.500 linhas que ficava bem lenta, mudar para a nova tabela baseada em AJAX fazia com que esses mesmos dados parecessem bastante rápidos.

— Artlung
fonte

Obrigado artlung. Fazer algo um pouco assim, na verdade, obter todos os dados de uma vez do servidor, mas apenas desenhar linhas da tabela quando necessário.

— morgancodes de

Parece uma boa escolha. Estou me perguntando se a preocupação com o número de linhas em uma tabela em um navegador sempre será um problema, ou se a memória da maioria dos computadores aumentar, isso não será um problema.

— artlung de

A memória não é um problema com a quantidade de dados que estou carregando. O gargalo é a manipulação do DOM.

— morgancodes de

Acho que estamos dizendo a mesma coisa. Quanto mais dados você carrega, mais nós DOM você carrega; para mim, eles estão relacionados em termos de memória necessária. Espero que sua situação tenha melhorado de qualquer maneira.

— artlung

1

se você quiser remover apenas rápido .. você pode fazer como abaixo ..

$( "#tableId tbody tr" ).each( function(){
  this.parentNode.removeChild( this ); 
});

mas, pode haver alguns elementos vinculados a eventos na tabela,

nesse caso,

o código acima não impede o vazamento de memória no IE ... TT e não é rápido no FF ...

Desculpe....

0

isso funciona para mim:

1- adicionar classe para cada linha "removeRow"

2- no jQuery

$(".removeRow").remove();

— Alsaket
fonte

-2

Você poderia tentar isso ...

var myTable= document.getElementById("myTable");
if(myTable== null)
    return;
var oTBody = myTable.getElementsByTagName("TBODY")[0];
if(oTBody== null)
    return;
try
{
    oTBody.innerHTML = "";
}
catch(e)
{
    for(var i=0, j=myTable.rows.length; i<j; i++)
        myTable.deleteRow(0);
}

— Bilbo Waggins
fonte