0

Tengo una tabla y un botón que al presionarlo genera una fila de la tabla, clonando una fila oculta que se tiene como plantilla:

function agregaFila()
{
nid++;
$("#tabla tbody tr:eq(0)").clone().removeClass('fila-base').attr("id",nid).appendTo("#tabla tbody");
};

Esta fila plantilla tiene varias columnas, con elementos en cada una de esas columnas. En la columna final, hay una clase ".Eliminar", que al presionarlo elimina la fila seleccionada:

var parent = $(this).parents().get(0);
var fila=$(parent).attr('id');
console.log(fila);
$(parent).remove();

En régimen de uso, el usuario puede haber creado múltiples filas y haber eliminado filas a su gusto (intercaladas, consecutivas, la primera, la última, etc).

Una vez que se ha grabado la información de la tabla, se deben eliminar todas las fila de la tabla, excepto la primera y es aquí que tengo el problema, pues no he logrado implementar la forma de identificar las filas que están desplegadas en la tabla y eliminarlas, excepto la primera.

Cualquier ayuda, me es de mucho valor y desde ya la agradezco.


Creo que con algo como esto puedo empezar:

$("#tabla tbody tr").each(function () 
{
  i=i+1;

con esto cuento las n filas existentes y luego hago el mismo recorrido de las filas, eliminándolas hasta n-1, voy a ver cómo resulta.


Si a alguien le sirve, lo solucioné creando la siguiente función:

function eliminaFilas()
{
//OBTIENE EL NÚMERO DE FILAS DE LA TABLA
var n=0;
$("#tabla tbody tr").each(function () 
{
n++;
});
//BORRA LAS n-1 FILAS VISIBLES DE LA TABLA
//LAS BORRA DE LA ULTIMA FILA HASTA LA SEGUNDA
//DEJANDO LA PRIMERA FILA VISIBLE, MÁS LA FILA PLANTILLA OCULTA
for(i=n-1;i>1;i--)
{
$("#tabla tbody tr:eq('"+i+"')").remove();
};
};
1

4 respuestas 4

2

Se me ocurre que a la primera fila (la base) le puedes agregar una clase para distinguirla.

<tr class="primerFila"></tr>

Recuerda, la clase solo es para distinguir. Luego en tu código JS que clona puedes hacer lo siguiente:

function agregaFila()
{
    nid++;
    $(".primerFila").eq(0).clone().addClass("otrasFilas").removeClass("primerFila").attr("id", nid).appendTo("#tabla tbody");
};

Y luego para eliminar todas las filas excepto la primera:

function eliminarFilas()
{
    $(".otrasFilas").remove();
}
1
  • Gracias por tu aporte. Tal como le comenté a @jcarrenog, necesito que se eliminen todas las filas, excepto la primera visible que se agregó, adicional a la fila base oculta que no se debe eliminar, pues sirve de plantilla para clonarla. Con tu aporte, se eliminarían todas las filas visibles. Commented el 23 nov. 2016 a las 23:17
2

Probablemente la solución más sencilla es usar los pseudo-selectorres :not y :first-child

$('table tr:not(:first-child)').remove();

Aquí te dejo un fiddle: https://jsfiddle.net/zevane/h9on15LL/

EDIT: Con el siguiente código elimino todas las filas menos las dos primeras, como se indica en los comentarios. El fiddle ahora refleja esta versión.

$('table tr:not(:first-child)').slice(1).remove();
5
  • Me gusta mucho esta solución. Limpia y sin cambiar mucho lo que usuario tiene ya.
    – ggderas
    Commented el 23 nov. 2016 a las 13:19
  • Muchas gracias por tu sugerencia, me parece interesante y concisa. Commented el 23 nov. 2016 a las 22:27
  • Muchas gracias por tu sugerencia, me parece interesante, elegante y concisa. Revisando la pregunta que postee, me doy cuenta que omití algo: "Una vez que se ha grabado la información de la tabla, se deben eliminar todas las fila de la tabla, excepto la primera y ". Cuando puse "excepto la primera", me refiero a la primera visible, la fila base debe seguir existiendo oculta, no debe eliminarse. El código que me das, entiendo que eliminará todas las filas, excepto la oculta, pero en mi caso, necesito que adicional a la fila oculta, quede la primera fila visible agregada. Commented el 23 nov. 2016 a las 22:41
  • Es que deberías haber puesto un HTML. ¿Entonces hay una fila base oculta y otra fila más, visible?
    – jcarrenog
    Commented el 24 nov. 2016 a las 8:12
  • He modificado el fiddle y la solución
    – jcarrenog
    Commented el 24 nov. 2016 a las 8:26
1

Es mucho más fácil utilizar slice, que te permite extraer un rango de un conjunto:

$('#tabla tbody tr').slice(1).remove();

De todas formas, para contar la cantidad de filas:

$('#tabla tbody tr').length(); // Tamaño de la selección.

Crear una clase diferente solo para distinguir el primer de los demás... las clases son para aplicar estilos, no con propósitos identificativos (para eso están los id o los atributos data- de usuario).

Otra solución:

$('#tabla tbody tr').not(':first').remove();

Pero la versión con slice es mucho más rápida que haciendo uso de otro selector.

1

Un ejemplo de como eliminar todas las filas de una tabla excepto la primera.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#add").click(function(){
            // Obtenemos el numero de filas (td) que tiene la primera columna
            // (tr) del id "tabla"
            var tds=$("#tabla tr:first td").length;
            // Obtenemos el total de columnas (tr) del id "tabla"
            var trs=$("#tabla tr").length;
            var nuevaFila="<tr>";
            for(var i=0;i<tds;i++){
                // añadimos las columnas
                nuevaFila+="<td>columna "+(i+1)+" Añadida con jquery</td>";
            }
            // Añadimos una columna con el numero total de columnas.
            // Añadimos uno al total, ya que cuando cargamos los valores para la
            // columna, todavia no esta añadida
            nuevaFila+="<td>"+(trs+1)+" columnas";
            nuevaFila+="</tr>";
            $("#tabla").append(nuevaFila);
        });
 
        /**
         * Funcion para eliminar la ultima columna de la tabla.
         * Si unicamente queda una columna, esta no sera eliminada
         */
        $("#del").click(function(){
            // Obtenemos el total de columnas (tr) del id "tabla"
            var trs=$("#tabla tr").length;
            if(trs>1)
            {
                // Eliminamos la ultima columna
                $("#tabla tr:last").remove();
            }
        });
    });
    </script>
 
    <style>
    #add, #del  {cursor:pointer;text-decoration:underline;color:#00f;}
    </style>
</head>
 
<body>
<div id="add">pulsa aquí para añadir una nueva fila desde jquery</div>
<div id="del">pulsa aquí para eliminar la ultima fila desde jquery</div>
<p>
    <table id="tabla" border="1">
        <tr>
            <td>primera columma</td>
            <td>segundo columna</td>
            <!-- podemos añadir tantas columnas como deseemos -->
            <!--<td>tercera columna</td>-->
        </tr>
    </table>
</p>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.