[SOLUCIONADO] Agregar y eliminar filas dinamicamente

[axelb]

Hola, estoy desesperado! Un cliente me pide poder agregar varios registros a la vez a una tabla, pero quiere (por cabezadura nomas) que tenga el siguiente formato:

campo1 campo2 campo3 btnEliminar
campo1 campo2 campo3 btnEliminar
campo1 campo2 campo3 btnEliminar btnAgregar

Su idea es que pueda ingresar uno solo o varios, teniendo un boton para agrear una fila nueva debajo.
El boton de agregar una nueva fila siempre deberia "moverse" a la nueva fila creada, cosa de que quede en la ultima fila siempre.
Al crear la 2da fila deberia aparecer en la primera el boton para eliminar dicha fila.
Al eliminar la ultima fila, la nueva ultima fila deberia de quedar con el boton de agregar una nueva fila.

Encontre muchos ejemplos que pensé me podian servir, pero al intentar adaptarlas me encuentro con muchos problemas y no logro obtener ese bendito funcionamiento. Siempre utilizando javascritp y jquery. Debo mencionar que soy novato en estas tecnologias. Quise resolverlo por mi cuenta pero ya no me queda tiempo. Intente convencer al cliente de que hay otras opciones pero no esta dispuesto a cambiar. Por favor necesito de toda su ayuda!!

[Alexis88]

Sería básicamente como esto.

Como hay varios botones cuyo funcionamiento es el mismo, utilizamos clases para identificarlos y diferenciarlos (botones de eliminación y adición de filas). Cuando se produce un clic en el cuerpo de la tabla, tomamos al botón, la celda en la que está y la fila que alberga a ambos elementos y los almacenamos en variables.

A continuación, trabajamos con condiciones para determinar las acciones a realizar según sea el botón pulsado. Si es el de adición: se clona la fila en la cual se encuentra el botón; se retira al botón de adición de la celda que ocupa y, finalmente, se añade la fila clonada al cuerpo de la tabla. Si se pulsa el botón de eliminación, preguntamos al usuario si está seguro de eliminar la fila. De ser positiva la respuesta, verificamos que haya más de una fila en el cuerpo de la tabla y un botón a la derecha del pulsado (o sea, el de adición); de ser así, clonamos al botón siguiente (el de adición) y lo añadimos en la última celda de la fila previa. Finalmente, eliminamos del cuerpo de la tabla a la fila en la que se encuentra el botón pulsado.

Si no quieres que se pregunte al usuario si está seguro de eliminar la fila, solo elimina la condición en cuestión.

[axelb]

Excelente Alexis88! Muchísimas gracias!! Lo único que le encuentro es que al quedar 1 sola fila deberia aparecer el boton de agregar y no el de eliminar o, en todo caso, que no deje eliminar si hay una sola fila. Seria muy complejo esto?

[Alexis88]

Lo había hecho así en un inicio, pero luego pensé que sería mejor dejar que se eliminen todas.

Solo necesitas mover una línea más arriba a la condición en donde verificamos que queda más de una fila:

Código Javascript:

if (tbody.querySelectorAll("tr").length > 1){
    if (confirm("¿Estás seguro de querer eliminar esta fila?")){
        if (boton.nextElementSibling){
            clon = boton.nextElementSibling.cloneNode(true);
            fila.previousElementSibling.querySelector("td:last-child").appendChild(clon);
        }
        this.removeChild(fila);
    }
}
else{
    alert("No puedes eliminar más filas");
}
 

DEMO

[axelb]

jaja seguro que si lo ponias y no lo hubiera querido lo podria haber modificado sin probelmas, pero a la reversa ya no! je muchisimas gracias Alexis88!! Si pudiera darte mil puntos de una te lo daría!!