deleteRow y reasignacion de nombres a los objetos restantes

pcarvajal · #1 (**permalink**) 30/11/2007, 08:43

Tengo el siguiente código que me agrega y elimina filas a una tabla dinamicamente:

Cita:

<html>
<head>
<script>
function valida(){
var x=document.frm.cuantos.value;
//deben ser 2 o mas alternativas..
if (x >= 2){
var i;
for (i=1;i<=x;i++){
alert('alternativa_'+i+'-->'+document.getElementById('alternativa_'+i).value );
if(document.getElementById('alternativa_'+i).value ==""){
alert("Debe ingresar el texto de la alternativa");
document.getElementById('alternativa_'+i).focus();
return false;
}
}
}
}
var n=0;
function add() {
n++;
pepe = document.getElementById('tabla');
fila = document.createElement('tr');
fila.id='contenedor'+n;
celda = document.createElement('td');
fila.appendChild(celda);

code=document.createElement('input');
code.type='text';
code.name='alternativa_'+n;
code.id='alternativa_'+n;
code.size='50';
code.maxlength='100';
celda.appendChild(code);

celda = document.createElement('td');
fila.appendChild(celda);
cant=document.createElement('input');
cant.type='button';
cant.value='X';
cant.onclick = function() {del(this.parentNode.parentNode.rowIndex)};
celda.appendChild(cant);
pepe.appendChild(fila);

document.getElementById('cuantos').value = n;
}

function del(obj){
document.getElementById('tabla').deleteRow(obj)
n--;
document.getElementById('cuantos').value = (document.getElementById('cuantos').value-1);
}
</script>
</head>
<body>
<form name="frm">
Total de alternativas:
<input type="text" name="cuantos" value="0" size="3" readonly> 
<input class="boton" type="button" value=" + " onclick="add()">
<table>
<tbody id="tabla"> </tbody>
</table>
<input type="button" value="Validar Alternativas" onclick="valida()">
</form>
</body>
</html>

El asunto es que, si elimino el ultimo elemento creado y valido las alternativas no hay problemas. Pero si elimino un elemento intermedio y valido las alternativas, se cae.
Más facil aun:
-Creo los elementos 1,2,3,4 y 5
-Elimino el 3
-Ahora Valido..
como el 3 ya no existe y los restantes despues de él mantuvieron su nombre, el script se cae, porque cuando eliminó un elemento no reasignó los nombres a los elementos restantes para que al recorrerlos por orden los pudiera encontrar. (Vale decir, en este caso se eliminó el 3, el 4 deberia haberse transformado en el 3, el 5 en el 4 y asi sucesivamente hasta no encontrar mas elementos)

Como podría reasignar los nombres a los elementos restantes?

caricatos · #2 (**permalink**) 30/11/2007, 09:17

Hola:

En vez de hacer un bucle con los valores que tengas guardados, prueba con el "length" del array de inputs, por ejemplo... y si los guardas dentro de algún contenedor como un fieldset, mejor que mejor.

Saludos

pcarvajal · #3 (**permalink**) 30/11/2007, 09:24

Ah pues caricatos, muchas gracias por responder.
Sabes tiene que ser con un bucle y tiene que ser reasignandole los nombres a los restantes, porque lo que viene despues de eso (ASP), tambien rescata los valores a traves de un bucle.

pcarvajal · #4 (**permalink**) 03/12/2007, 06:26

alguien podría hecharme una manito porfavor???
Esto tengo que entregarlo hoy.. sino las voy a ver negras...

pcarvajal · #5 (**permalink**) 03/12/2007, 14:17

me parece increible que nadie pueda ayudarme...

MaBoRaK · #6 (**permalink**) 03/12/2007, 14:33

loading............

Planteaste mal TU SOLUCION, pero trataré de ayudarte.

Deberías guardar en un array los inputs que creas, entonces si eliminar un ROW, eliminas también del array el ÍNDICE que corresponda, y a la hora de validar, simplemente consultas el array de los inputs.

connection closed.

rezocrew · #7 (**permalink**) 03/12/2007, 14:36

podrias guardar los datos temporalmente con algun input hidden , borrar la tabla y repintarla conl os datos de los input hidden para asi poder tener las validaciones correctas :D si te resulta me avisas

pcarvajal · #8 (**permalink**) 03/12/2007, 15:47

Cita:

Planteaste mal TU SOLUCION, pero trataré de ayudarte.

Vaya, no me retes que ya me llevado mil y un retos por estar entrampado con este código

Cita:

Deberías guardar en un array los inputs que creas, entonces si eliminar un ROW, eliminas también del array el ÍNDICE que corresponda, y a la hora de validar, simplemente consultas el array de los inputs.

Como dimensiono el array?? le doy dimensiones fijas o puede ser variable???
Y si es variable como lo consulto?
Y si elimino el índice del array no irá a suceder lo mismo que comentaba antes???

Cita:

podrias guardar los datos temporalmente con algun input hidden , borrar la tabla y repintarla conl os datos de los input hidden para asi poder tener las validaciones correctas

como borro y pinto de nuevo esa tabla si la estoy armando dinamicamente??

Pues mis disculpas a los dos y gracias tambien por responder, pero ando totalmente ciego y nulo con Javascript :S

pcarvajal · #9 (**permalink**) 04/12/2007, 06:21

me echan una manito con el código por favor?
no quiero terminar el año cesante

messer · #10 (**permalink**) 04/12/2007, 08:02

Que tal si en el bucle de la validacion reasignas los nombres de los campos:

seria algo mas o menos como esto:

Código:

document.form.elements[i].name='alternativa'+i;

Espero q te sirva. Saludos!!

pcarvajal · #11 (**permalink**) 04/12/2007, 08:41

uf! gracias por contestar.
hice lo que me dijiste:

Cita:

Probé agregando 4 elementos, y eliminé el 3ro, pero me tira un error: "Se requiere un objeto"

messer · #12 (**permalink**) 04/12/2007, 09:26

Bueno amigo pcarvajal, he tenido un poco de tiempo libre, y pues me complace ayudarte.

Aqui te dejo "tu codigo" con una pequena modificacion completamente operativo:

Código:

<html>
<head>
<script>
function valida(){
var x=document.frm.cuantos.value;
//deben ser 2 o mas alternativas..
reasigna()
if (x >= 2){
var i;
for (i=1; i<=x; i++){
if(document.getElementById('alternativa_'+i).value==""){
alert("Ingrese la alternativa");
document.getElementById('alternativa_'+i).focus();
return false;
break;
}
alert(document.getElementById('alternativa_'+i).value);
}
}
}
var n=0;
function add() {
n++;
pepe = document.getElementById('tabla');
fila = document.createElement('tr');
fila.id='contenedor'+n;
celda = document.createElement('td');
fila.appendChild(celda);

code=document.createElement('input');
code.type='text';
code.name='alternativa_'+n;
code.id='alternativa_'+n;
code.size='50';
code.maxlength='100';
celda.appendChild(code);

celda = document.createElement('td');
fila.appendChild(celda);
cant=document.createElement('input');
cant.type='button';
cant.value='X';
cant.onclick = function() {del(this.parentNode.parentNode.rowIndex)};
celda.appendChild(cant);
pepe.appendChild(fila);

document.getElementById('cuantos').value = n;
}

function del(obj){
document.getElementById('tabla').deleteRow(obj)
n--;
document.getElementById('cuantos').value = (document.getElementById('cuantos').value-1);
}
function reasigna(){
var d=document;
var inputs=d.frm.getElementsByTagName('input');
var inpTxt= new Array()
var cont=0;
for (m=0; m<inputs.length; m++){
if(inputs[m].type=='text' && inputs[m].name!='cuantos'){
cont=cont+1;
inputs[m].name='alternativa_'+cont;
inputs[m].id='alternativa_'+cont;
 }
}
}
</script>
</head>
<body>
<form name="frm">
Total de alternativas:
<input type="text" name="cuantos" id="cuantos" value="0" size="3" readonly>&nbsp;
<input class="boton" type="button" value=" + " onclick="add()">
<table>
<tbody id="tabla"> </tbody>
</table>
<input type="button" value="Validar Alternativas" onclick="valida()">
</form>
</body>
</html>

Quizas no sea una manera muy elegante de hacerlo, pero lo importante en este caso es que funciona.

Te recomiendo que investigues un poco mas, no siempre uno se consigue con quien quiera hacer los codigos por uno.

Saludos!!

pcarvajal · #13 (**permalink**) 04/12/2007, 10:05

es que ni te imaginas de la que me has salvado.
y creeme que lo mio no fue flojera, sino ceguera.
te pasaste, muchas gracias messer!!!
espero algun dia poder devolverte la mano, en serio.

messer · #14 (**permalink**) 04/12/2007, 10:26

Me alegra haberte ayudado!

Saludos!