Agregar filas a una tabla dinámicamente
Debo agregar filas a una tabla por medio de javascript sin que me refresque la página
La idea es que después me pueda llevar la tablo tal ves por un array o algo parecido
La idea seria esta, no puedo hacerlo por meidode un form porque ya me encuentro dentro de uno
El código seria algo así
<form>
# muchos campos del form despues estaria esto...
<input type="text" name="campo1">
<input type="text" name="campo2">
<input type="button" class="añadir campo1 y campo 2 a la tabla" onclick="añadir">
<tabla> #valores agregados
</tabla>
funcion añadir{
variable 1 = campo1;
variable 2 = campo2;
Método añadir los valores a la tabla;
Método añadir los valores a un array que me voy a llevar más tarde para ingresar los valores a un bd;
Método eliminar un fila de valores añadidos;
}
// La idea es que conforme vaya añadiendo elementos a la tabla se actualize sin necesidad de recargar la página y después esos valores (los que queden en la tabla en caso de que se hallan añadido y elimnado) me los pueda llevar por post
1 respuesta
Se me ocurre que plantees el asunto de la siguiente manera:
En javascript haces una función que obtenga los valores introducidos en los dos inputs, y los agregue al value de un input oculto que que contendrá todos los valores agregados y te permitirá pasarlos por post.
Esa función tambien tiene que vaciar el contenido de los input para que se siga insertando
Te pongo un código para que veas el planteamiento pero es improvisado y sin probar quizás falle algo ;)
// jquery incluido
<script>
var agregar = function(){
// cambio de value al actual
var input1Value = $('#input1').val();
if(input1Value != ''){
$('#inputoculto').val($('#inputoculto').val()+','+input1Value);
}
var input2Value = $('#input2').val();
if(input2Value != ''){
$('#inputoculto').val($('#inputoculto').val()+','+input2Value);
}
// reset de los inputs
$('#input1').val('');
$('#input2').val('');
// escritura en la tabla
var creacion = '<tr><td>'+input1Value+'</td><td>'+input2Value+'</td></tr>';
$('#mitabla').append(creacion);
}
</script>
.....
<input type="text" id="input1" value="">
<input type="text" id="input2" value="">
<input type="text" id="inputoculto" value="">
<table id="mitabla">
</table>con esto tendrías un value en inputoculto que sería algo así (depende obviamente de las entradas del usuario): 1,Antonio,otro value,amigos,54,
Solo tienes que procesar esa cadena separando por comas donde recojas los valores, php por ejemplo, y ya tendrías un array de todos los values insertados listo para ser usado.
Te dejo un link que contiene una función que escribe nuevas filas en una tabla con javascript, ya que lo que yo te he puesto no creo que funcionara o no asi de simple, es mas ilustrativo que otra cosa.
Obviamente el inputoculto tiene que ser type hidden... las prisas... (sorry)
