Eliminar todas las filas en una tabla HTML


99

¿Cómo puedo eliminar todas las filas de una tabla HTML, excepto las que <th>utilizan Javascript, y sin recorrer todas las filas de la tabla? Tengo una tabla muy grande y no quiero congelar la interfaz de usuario mientras recorro las filas para eliminarlas.


2
Tiene que haber un bucle, no hay un comando "delete-multiple-elements", el método removeChildtoma solo un elemento DOM.
Šime Vidas

@SLaks asumiendo que se refería a la fila que contiene las filas de encabezado
Eonasdan

Respuestas:


92

Mantenga la <th>fila en ay <thead>las otras filas en a y <tbody>luego reemplace <tbody>por una nueva y vacía.

es decir

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

Fácilmente la solución más eficiente, siempre que el desarrollador de JavaScript tenga permitido modificar el HTML.
Blazemonger

1
Tenga cuidado, si va a reemplazar el tbody usando la propiedad innerHTML, no funcionará en IE, aunque hay una solución.
aziz punjani

2
@Eonasdan - Eso es algo subjetivo. Hay muchas bibliotecas (mi preferencia personal sería usar YUI 3 en estos días) si alguien con este problema quisiera resolver este problema con una de ellas. Sin embargo, los principios serán los mismos sin importar qué gran parte del código de terceros desee incluir.
Quentin

3
Necromancing esto ... lo que está mal con: document.getElementById('tbody').innerHTML = '';
Trees4theForest

2
@ Trees4theForest Esto funciona bien para mí. Probablemente no fue posible en el momento de OP.
Mabu

94

esto eliminará todas las filas:

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

40
Si no desea eliminar el encabezado: $ ("# table_of_items tbody tr"). Remove ();
TTT

1
Muy buena respuesta simple. $("tbody#id tr").remove()
Usé

Creo que esta es una mejor respuesta que la aceptada, aunque depende de si desea usar JQuery o no. Pero de alguna manera .remove no funcionó en Chrome.
Milind Thakkar

TTT, use las etiquetas <thead><th></th> </thead> para crear la cabecera de la tabla. Entonces $ ("# table_of_items tr"). Remove (); funciona bien para usted, porque elimina solo las etiquetas <tr>.
Kate

TTT, agregue su comentario a la respuesta. ¡Tu respuesta es perfecta!
Khorshid

57

Muy crudo, pero esto también funciona:

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

9
Desafortunadamente, esto no mantiene los encabezados <th> como pide el OP.
JoSeTe4ever

1
Lo hace si colocan sus encabezados <th> anidados en un <thead>. Esta es probablemente la forma sintácticamente más correcta de construir la tabla de todos modos.
Jon Black

Funciona genial. Creo que esto es adecuado solo para personas como yo, que han creado encabezado de tabla, fila, celda, tbody todo en JQuery.
Shamsul Arefin Sajib

Esto funcionó bien simplemente para borrar el html dentro de un tbody :)
RudyOnRails

Limpié solo el cuerpo con una ligera modificación a este var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; bodyRef.innerHTML = '';
azyth

17

Esta es una pregunta antigua, 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.

¡Salud!


9
más corto (y más rápido): var rowCount = myTable.rows.length; while (- rowCount) myTable.deleteRow (rowCount);
Petar

El código en el comentario anterior no elimina la primera fila
PrfctByDsgn

16

Puntos a tener en cuenta, en el Cuidado con los errores comunes :

Si su índice de inicio es 0 (o algún índice desde el comienzo), entonces, el código correcto 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);
}

NOTAS

1. El argumento para deleteRow es fijo,
esto es necesario ya que a medida que eliminamos una fila, el número de filas disminuye.
es decir; en el momento en que alcance (rows.length - 1), o incluso antes de que esa fila ya se haya eliminado, por lo que tendrá algún error / excepción (o uno silencioso).

2. el rowCount se toma antes de que comience el ciclo for ya que a medida que eliminamos "table.rows.length" seguirá cambiando, así que nuevamente tiene un problema, que solo las filas pares o impares solo se eliminan.

Espero que ayude.


10

Suponiendo que solo tiene una tabla para que pueda hacer referencia a ella solo con el tipo. Si no desea eliminar los encabezados:

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

de otra manera:

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

¡Espero eso ayude!


7

Necesitaba eliminar todas las filas excepto la primera y la solución publicada por @strat, pero eso resultó en una excepción no detectada (haciendo referencia al Nodo en el 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);
}

7

Si puede declarar un IDfor tbody, simplemente puede ejecutar esta función:

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

5

esto funcionaría la eliminación de iteraciones en la tabla HTML en nativo

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

5

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

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

3
espera, esta es la respuesta de jQuery, ¡la pregunta original no pedía específicamente la solución jQuery!
revelt

4

Assing alguna identificación a la etiqueta tbody. es decir Después de esto, la siguiente línea debe conservar el encabezado / pie de página de la tabla y eliminar todas las filas.

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

Y, si desea que se borre toda la tabla (encabezado / filas / pie de página), establezca la identificación al nivel de la tabla, es decir


3

Si no desea eliminar thy solo desea eliminar las filas internas, esto está funcionando perfectamente.

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

3

Qué tal esto:

Cuando la página se cargue por primera vez, haga esto:

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

Luego, cuando quieras limpiar la mesa:

myTable.innerHTML=myTable.oldHTML;

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


solución muy elegante
revelt

2

Si tiene muchas menos <th>filas que no <th>filas, puede reunir todas las <th>filas en una cadena, eliminar la tabla completa y luego escribir<table>thstring</table> donde solía estar la tabla.

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


1
En su lugar, recopile los <th>s como elementos DOM, borre el HTML interno de la tabla y luego agregue los <th>s nuevamente.
Entonio

Tenga cuidado, si va a reemplazar clear tbody usando la propiedad innerHTML, no funcionará en IE, aunque hay una solución.
aziz punjani

2

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

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

1

este es un código simple que acabo de escribir para resolver esto, sin eliminar 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!!.


1

Asigne una identificación o una clase para su tbody.

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

Puede nombrar su identificación o clase como desee, no necesariamente #tbodyIdo .tbodyClass.


0

Limpia el cuerpo de la mesa.

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

2
html () es en realidad un método jQuery.
carlodurso

-1

tabla constante = document.querySelector ('tabla'); table.innerHTML === ''? nulo: table.innerHTML = ''; el javascript anterior funcionó bien para mí. Comprueba si la tabla contiene datos y luego borra todo, incluido el encabezado.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.