JavaScript - Añadir filas a una tabla con jQuery

   
Vista:

Añadir filas a una tabla con jQuery

Publicado por superx335 (4 intervenciones) el 21/01/2013 11:53:05
Buenas,

encontré un blog donde hablaban de esto, y justamente cogí parte del código, modifiqué un par de cosas, y logré que funcionara.

Es decir, usando jQuery, al pulsar un botón se añade una fila a la tabla que ya tengo creada en HTML.

El problema es que cuando lo hago, la fila que se crea añade más COLUMNAS de la cuenta y se alarga. Además cada vez que pulso se incrementa, de manera que queda algo así como:

-----
--------
----------
-------------

Aquí el código que utilizo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	//Aquí la función
 
	$("#add").click(function(){
		var n = $('tr:last td', $("#tablatareas")).length;
		var tds = '<tr>';
		for(var i=0; i<n; i++){
			tds += "<td> AQUÍ VA UN TOCHO EN PHP</td>";
			tds += '<td><input type="text" name="horamax id="horamax" /> </td>';
			tds += "<td></td>";
			tds += "<td><?php echo "Hi again!" ?></td>";
		}
		tds += '</tr>';
		$("#tablatareas").append(tds);
		})
 
 
});
</script>



El tema es que si dejo una sola "tds +=" si funciona, por lo que intuyo que el problema viene de que el bucle for hace "n" pasadas y por cada columna que debería poner mete 4 en este caso (una por cada tds+=) pero el caso es que no se me ocurre cómo hacerlo...

Gracias!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Añadir filas a una tabla con jQuery

Publicado por xve (1595 intervenciones) el 21/01/2013 18:45:00
Hola, de la manera que lo haces, estas doblando cada vez el numero de registros...

Es muy sencillo, intento explicarte:
1.- Pulsas en el id "add".
2.- n equivale al numero de td's que tiene el ultimo tr, por lo tanto únicamente puedes poner n td's.
3.- supongamos que n=2
Tu generas un bucle que se repite dos veces (n), y en el añades dos td's que equivale a 4 td's

Siguiente proceso:
1.- Vuelves a pulsar en el id "add"
2.- n equivale al numero de td's que tiene el ultimo tr, por lo tanto únicamente puedes poner n td's.
3.- ahora el ultimo tr tiene 4 td's (son los que has añadido anteriormente)
Tu generas un bucle que se repite 4 veces (n), y en el añades dos td's que equivale a 8 td's

Prueba tu código así:
1
2
3
4
5
6
7
8
9
$("#add").click(function(){
    var tds = '<tr>';
        tds += "<td> AQUÍ VA UN TOCHO EN PHP</td>";
        tds += '<td><input type="text" name="horamax id="horamax" /> </td>';
        tds += "<td></td>";
        tds += "<td><?php echo "Hi again!" ?></td>";
    tds += '</tr>';
    $("#tablatareas").append(tds);
});


Espero que lo hayas entendido... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar