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
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
Respostas:
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)
document.getElementById('tbody').innerHTML = '';
isso removerá todas as linhas:
$("#table_of_items tr").remove();
$("tbody#id tr").remove()
Muito bruto, mas isso também funciona:
var Table = document.getElementById("mytable");
Table.innerHTML = "";
<th>
aninhados em a <thead>
. Esta é provavelmente a maneira mais sintaticamente correta de construir a tabela.
var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
bodyRef.innerHTML = '';
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!
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.
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!
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);
}
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
Se você não deseja remover th
e apenas deseja remover as fileiras de dentro, está funcionando perfeitamente.
var tb = document.getElementById('tableId');
while(tb.rows.length > 1) {
tb.deleteRow(1);
}
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.
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.
<th>
s como elementos DOM, limpe o innerHTML da tabela e anexe os <th>
s a ele novamente.
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);
}
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ê!!.
Apenas limpe o corpo da mesa.
$("#tblbody").html("");
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.
removeChild
leva apenas um único elemento DOM.