llenar - eliminar todas las filas de una tabla javascript

Eliminar todas las filas en una tabla HTML

Question

¿Cómo puedo eliminar todas las filas de una tabla HTML excepto las <th> usando Javascript y sin recorrer todas las filas de la tabla? Tengo una mesa muy grande y no quiero congelar la UI mientras estoy recorriendo las filas para eliminarlas

Answer 1

Puntos a destacar, sobre los errores comunes:

Si te gusta el código para iniciar el índice desde 0 (o algún índice desde el principio),

entonces, la solución correcta es:

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);
}

1. el argumento para deleteRow es fijo

esto es necesario ya que al eliminar una fila, el número de filas disminuye.
es decir; para cuando llegue (rows.length - 1), o incluso antes de que esa fila ya haya sido eliminada, entonces tendrá algún error / excepción (o uno silencioso).

2. rowCount se toma antes de que comience el ciclo for

dado que a medida que eliminamos "table.rows.length" seguirá cambiando, así que de nuevo tiene algún problema, solo las filas impares o pares solo se eliminan.

Ten cuidado con estos, ahorra tiempo, mucha suerte.

Answer 2

Asigna una identificación o una clase para tu tbody.

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

Puede nombrar su id o clase como desee, no necesariamente #tbodyId o .tbodyClass .

Answer 3

Esta es una vieja pregunta, sin embargo, recientemente tuve un problema similar.
Escribí este código para resolverlo:

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]);
}

Eso eliminará todas las filas, excepto la primera.

¡Aclamaciones!

Answer 4

Esto funciona en IE sin tener que declarar una var para la tabla y eliminará todas las filas:

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

Answer 5

Mantenga la <th> fila en un <thead> y las otras filas en <tbody> luego reemplace <tbody> con uno nuevo, vacío.

es decir

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

Answer 6

Muy crudo, pero esto también funciona:

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

Answer 7

Necesitaba eliminar todas las filas, excepto la primera y la solución publicada por @strat, pero eso dio como resultado una excepción no detectada (hace referencia al nodo en contexto donde no existe). Lo siguiente funcionó para mí.

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

Answer 8

Qué tal esto:

Cuando la página se carga por primera vez, haz esto:

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

Luego, cuando quieras despejar la mesa:

myTable.innerHTML=myTable.oldHTML;

El resultado será su (s) fila (s) de encabezado si eso es todo lo que comenzó, el rendimiento es mucho más rápido que el bucle.

Answer 9

Si no quiere eliminar th y solo quiere eliminar las filas internas, esto está funcionando perfectamente.

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

Answer 10

Si puede declarar una ID para tbody , simplemente puede ejecutar esta función:

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

Answer 11

Si tiene muchas <th> filas menos que <th> filas, puede recopilar todas las <th> filas en una cadena, eliminar toda la tabla, y luego escribir <table>thstring</table> donde se utilizó la tabla ser.

EDITAR: Donde, obviamente, "thstring" es el html para todas las filas de <th> s.

Answer 12

Simplemente borre el cuerpo de la tabla.

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

Answer 13

Suponiendo que solo tiene una tabla para que pueda referenciarla solo con el tipo. Si no desea eliminar los encabezados:

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

de otra manera:

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

¡Espero eso ayude!

Answer 14

el código de dar abajo funciona muy bien. Elimina todas las filas, excepto la fila de encabezado. Entonces este código realmente t

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

Answer 15

este es un código simple que acabo de escribir para resolver esto, sin quitar la fila del encabezado (la primera).

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

¡¡Espero que funcione para ti!!.

Answer 16

esto eliminará todas las filas:

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

Answer 17

esto trabajaría la eliminación de iteración en la tabla HTML en nativo

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