tabla clara jquery

103

Tengo una tabla HTML llena de varias filas.

¿Cómo puedo eliminar todas las filas de la tabla?

aprendizaje
fuente

Respuestas:

162

Utilice .remove ()

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

Si desea conservar los datos para uso futuro incluso después de eliminarlos, puede usar .detach ()

$("#yourtableid tr").detach();

Si las filas son elementos secundarios de la tabla, puede usar el selector secundario en lugar del selector descendiente, como

$("#yourtableid > tr").remove();
rahul
fuente
16
cuidado con ese último: la mayoría de los navegadores agregan un tbodyelemento implícito alrededor de los trelementos.
nickf
96

Si desea borrar los datos pero conservar los encabezados:

$('#myTableId tbody').empty();

La tabla debe formatearse de esta manera:

<table id="myTableId">
    <thead>
        <tr>
            <th>header1</th><th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td><td>data2</td>
        </tr>
    </tbody>
</table>
HoffZ
fuente
esto está funcionando, pero esto elimina el 'tbody' en sí mismo con todo el 'tr' dentro de él.
Hakan Fıstık
Tienes razón, @HakamFostok. He editado mi respuesta para usar empty () en su lugar
HoffZ
41

Un poco más rápido que quitar cada uno individualmente:

$('#myTable').empty()

Técnicamente, esto eliminará thead, tfooty tbodylos elementos también.

nickf
fuente
27

Necesitaba esto:

$('#myTable tbody > tr').remove();

Elimina todas las filas excepto el encabezado.

Bumptious Q Bangwhistle
fuente
12

La opción nuclear:

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

Destruye todo dentro de #yourtableid. ¡Tenga cuidado con sus selectores, ya que destruirá cualquier html en el selector que pase!

KevinDeus
fuente
2
+1 para nuclear :). Pero debo entender que no es el 'mejor' estilo :) No lo recomendaría en general
Budda
lol. Convenido. He usado este método en particular en el pasado para acelerar y resolver situaciones difíciles . Tiene un uso válido en el ámbito de las aplicaciones JQuery.
KevinDeus
11
$("#employeeTable td").parent().remove();

Esto eliminará todo lo que trtenga de tdniño. es decir, se eliminarán todas las filas excepto el encabezado.

Mrinmoy Sen
fuente
Este es el único que me funciona. Eliminar todo menos el encabezado ...
Elbert Villarreal
6

Esto eliminará todas las filas que pertenecen al cuerpo, manteniendo intactos los encabezados y el cuerpo:

$("#tableLoanInfos tbody tr").remove();
James Cooke
fuente
1
<table id="myTable" class="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody id="tblBody">

    </tbody>
</table>

Y quitar:

$("#tblBody").empty();
miragessee
fuente
0
  $('#myTable > tr').remove();
Saidesh Kilaru
fuente
0

Tener una tabla como esta (con un encabezado y un cuerpo)

<table id="myTableId">
    <thead>
    </thead>
    <tbody>
   </tbody>
</table>

elimine cada tr que tenga un padre llamado tbody dentro del #tableId

$('#tableId tbody > tr').remove();

y al revés si quieres agregar a tu mesa

$('#tableId tbody').append("<tr><td></td>....</tr>");
hichamkazan
fuente