Clonar ultima fila de una tabla con jquery

artuof · #1 (**permalink**) 27/10/2010, 05:55

Buenas,

el caso es que tengo una tabla de este modo:

Código HTML:

<table id="tabla">
  <tr id="t1">
     <td><input type="text" id="a1"></td>
     <td><input type="text" id="b1"></td>
     <td><input type="text" id="c1"></td>
     <td><input type="button" id="bt1"></td>
  </tr>
</table>

Y querría clonar la última fila, pero con los campos vacíos y los ids incrementados quedando así sucesivamente:

Código HTML:

<table id="tabla">
  <tr id="t1">
     <td><input type="text" id="a1"></td>
     <td><input type="text" id="b1"></td>
     <td><input type="text" id="c1"></td>
     <td><input type="button" id="bt1" onClick="addField();"></td>
  </tr>
  <tr id="t2">
     <td><input type="text" id="a2"></td>
     <td><input type="text" id="b2"></td>
     <td><input type="text" id="c2"></td>
     <td><input type="button" id="bt2" onClick="addField();"></td>
  </tr>
</table>

Hasta ahora he conseguido clonar la fila, pero no consigo acceder a los inputs para configurar sus ids y values:

Código:

        
function addField(){
       
      //Consigo el id actual      
      var clickID = $("#tabla tr:last").attr('id').replace('t','');               
                
      // Genero el nuevo numero id
      var newID = parseInt(clickID)+1;                               
                
      // Creo un clon del elemento tr que contiene los campos de texto
      fila = $("#tabla tr:last").clone(true);
                
      //Le asigno el nuevo numero id
      fila.attr("id",'t'+newID);      

      //AQUI SE ACCEDERÍA A LOS INPUTS PARA CAMBIAR IDS y VALORES
      //PERO NO LO CONSIGO, ESTO NO FUNCIONA:
      fila.children('td').eq(0).attr("id",'a'+newID).val('');
                                                         
       //Inserto nueva fila
       $("#topera").append(fila);                  
               
}

Como véis, clono la fila, solo que no consigo modificar los ids y valores de los inputs, por lo que se clonan exactos.

Esperando vuestra ayuda,
muchas gracias por adelantado.

PD: tengo que hacerlo con clone, no me sirven soluciones insertando todo el código html completo.

Dany_s · #2 (**permalink**) 27/10/2010, 14:21

porque queres modificar el id a la primer celda .children('td').eq(0)

¿para qué te sirve un id dinámico? si no sirven cuando creas estructuras fijas de forma dinámica

Código HTML:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
 
    tabla = $('#tabla');
    tr = $('tr:first', tabla);
    $('#agregarFila').live('click', function (){
        tr.clone().appendTo(tabla).find(':text').val('');
    });
 
    $(".eliminarFila").live('click', function (){
        $(this).closest('tr').remove();
    });
 
});
</script>
</head>
 
<body>
    
    <table id="tabla">
        <tr>
            <td><input type="text" name="nombre"></td>
            <td><input type="text" name="apellido"></td>
            <td><input type="text" name="mail"></td>
            <td><input type="button" value="Eliminar" class="eliminarFila"></td>
        </tr>
    </table>
 
<input type="button" value="Agregar" id="agregarFila">
 
</body>
</html>

artuof · #3 (**permalink**) 28/10/2010, 03:50

El tema de los ids dinámicos es para que a la hora de enviar el formulario para ser registrado en la bd pueda identificar los campos, porque según tu ejemplo, ¿como identificas los nuevos campos si se llaman igual que los ya existentes a la hora de hacer el post?

Ese es mi problema realmente.

Esperando ayuda de nuevo, gracias.

Dany_s · #4 (**permalink**) 28/10/2010, 12:08

el id de un elemento html no tiene nada que ver con un id de la base de datos, al enviar un formulario no se envia el id de input sino que se envia el valor del input

Cita:

¿como identificas los nuevos campos si se llaman igual que los ya existentes a la hora de hacer el post?

no entendi, supongo que decis para identificar el atributo name?

lo envias como array, en el name usas los corchetes []
name="nombre[]"
name="nombre[]"

si decis que cuando se entra al form se carga con datos de la bd y esos queres distinguir con los nuevos usa un campo oculto con los id (id de bd), cuando envias sabes que si el campo que contiene el id esta vacio quiere decir que es nuevo, si tiene id ya existe (podes usar para modificar), asi lo mismo podes usar para eliminar, cuando dan click en eliminar fijate si hay algo en el campo de la id, si no hay nada borrar solo de la pantalla pero si tiene borras de la pantalla y de la bd

algo como esto, supone que el primer registro que tiene lo trajiste de la bd, tiene en el input hidden id 1

Código PHP:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
 
    tabla = $('#tabla');
    tr = $('tr:first', tabla);
    $('#agregarFila').live('click', function (){
        tr.clone().appendTo(tabla).find(':text, :hidden').val('');
    });
 
    $(".eliminarFila").live('click', function (){
        var tr = $(this).closest('tr')
        if ( $('[name=id[]]', tr).val() )
            alert("Elimino de la bd con ajax");
        tr.remove();
    });
 
});
</script>
</head>
 
<?php
if (!empty($_GET)){
    $id = $_GET['id'];
    $nombre = $_GET['nombre'];
    foreach ($id as $k => $value) {
        echo "<br />";
        if ($id[$k]){
            echo "El registro " . $id[$k] . " " . $nombre[$k] . " existe.";
        } else {
            echo "El registro " . $nombre[$k] . "  <b>no existe</b>.";
        }
    }
}
?>
 
<body>
 
    <form action="">
        <table id="tabla">
            <tr>
                <td><input type="hidden" name="id[]" value="1"></td>
                <td><input type="text" name="nombre[]" value="nombre1"></td>
                <td><input type="text" name="apellido[]" value="apellido1"></td>
                <td><input type="text" name="mail[]" value="email1"></td>
                <td><input type="button" value="Eliminar" class="eliminarFila"></td>
            </tr>
        </table>
        <input type="button" value="Agregar" id="agregarFila">
        <input type="submit" value="Enviar datos"/>
    </form>
 
 
 
</body>
</html>

kokoou · #5 (**permalink**) 28/10/2010, 14:05

Dany_s,

Esto:

Código Javascript:

Ver originaltabla = $('#tabla');
tr = $('tr:first', tabla);

Es lo mismo que:

Código Javascript:

Ver originaltr = $('#tabla tr:first');

Documentación?, desconocía esta forma.

Dany_s · #6 (**permalink**) 28/10/2010, 19:56

si lo mismo pero me parece mas legible y mas usando variables

$(selector, contexto)

"selector" selecciona en lo que hay dentro del "contexto"
http://api.jquery.com/jQuery/

sino tabla.find('tr:first');

varias formas

como el :first que es igual :eq(0)

de rendimiento no sé jeje nunca tuve html gigantes

artuof · #7 (**permalink**) 29/10/2010, 01:34

Hola Dany_s, gracias de nuevo pero creo que no me he explicado bien.

Voy a usar tu ejemplo a ver si así puedo dejarlo más claro.

Supongamos que el formulario para introducir clientes es este:

Código HTML:

<table id="tabla">

        <tr>
            <td><input type="text" name="nombre"></td>
            <td><input type="text" name="apellido"></td>
            <td><input type="text" name="mail"></td>
            <td><input type="button" value="Eliminar" class="eliminarFila"></td>
        </tr>

</table>

Tras ir clonando filas según tu código jquery, el formulario quedaría así:

[HTML]

Código HTML:

<table id="tabla">

        <tr>
            <td><input type="text" name="nombre"></td>
            <td><input type="text" name="apellido"></td>
            <td><input type="text" name="mail"></td>
            <td><input type="button" value="Eliminar" class="eliminarFila"></td>
        </tr>
        <tr>
            <td><input type="text" name="nombre"></td>
            <td><input type="text" name="apellido"></td>
            <td><input type="text" name="mail"></td>
            <td><input type="button" value="Eliminar" class="eliminarFila"></td>
        </tr>
        <tr>
            <td><input type="text" name="nombre"></td>
            <td><input type="text" name="apellido"></td>
            <td><input type="text" name="mail"></td>
            <td><input type="button" value="Eliminar" class="eliminarFila"></td>
        </tr>
         .
         .
         .
</table>

Ahora llega el momento de hacer el post, y enviar los datos recogidos en el form a la bd. ¿Cómo hago para reconocer los distintos clientes si todos los "names" de los "inputs" son iguales? Por eso intentaba cambiar los ids o names cada vez que clonaba una fila, e ir incrementándolos.

¿Entiendes ahora mi cuestión?
Quiero hacer un post completo, no me sirve enviar cada cliente a la bd cada vez que clono una fila.

Me propones usar arrays, nombre[], pero entiendo que se machacarían los valores igualmente, ¿o no?

Esperando de nuevo tu ayuda.

Dany_s · #8 (**permalink**) 29/10/2010, 12:52

no, fijate el ejemplo que puse, ahi recorre los campos

en php vas a tener

nombre[] = "uno"
nombre[] = "dos"
nombre[] = "tres"
nombre[] = "cuatro"

fijate haciendo
var_dump($_GET['nombre'])