InsertRow() en Mozilla

Mickz · #1 (**permalink**) 20/04/2007, 15:21

Hola que tal amigos de FDW sabe he enontrado un codigo que me viene perfecto para lo que necesito hacer pero le encontre el defecto que en mozilla no funciona al 100% como en IE les pongo mi codigo para ver si alguien me puede decir que se le puede hacer para que funcione en mozilla Gracias

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo formulario</title>
<script language="javascript" type="text/javascript">

var indiceFilaFormulario=1;
function addPerson(){
myNewRow = document.getElementById("tablaFormulario").insertR ow(-1);
myNewRow.id=indiceFilaFormulario;
myNewCell=myNewRow.insertCell();
myNewCell.innerHTML="<td><input type='text' name='nombre["+indiceFilaFormulario+"]' id='nombresillo["+indiceFilaFormulario+"]' maxlength=5></td>";
//alert(myNewCell.innerHTML)
myNewCell=myNewRow.insertCell();
myNewCell.innerHTML="<td> <input type='text' name='email["+indiceFilaFormulario+"]'></td>";
myNewCell=myNewRow.insertCell();
var row=document.getElementById("tablaFormulario").row s;
var i = row.length-1
//if(i>1){myNewCell.innerHTML="<td><input type='button' value='Eliminar' onclick='removePerson(this.parentNode.parentNode.r owIndex)' ></td>";}
myNewCell.innerHTML="<td><button type='button' name='enviar' onclick='removePerson(this.parentNode.parentNode.r owIndex)'>Eliminar</button></td>";

indiceFilaFormulario++;

}

function removePerson(idFila){

document.getElementById("tablaFormulario").deleteR ow(idFila);

}

function contarTabla(){
var row=document.getElementById("tablaFormulario").row s;
var i = row.length-1
alert(i)

for(r=1;r<=i;r++){
//valores=document.formulario.nombre[r].value
valores=document.getElementById("nombresillo["+r+"]").value;
alert(valores)
//if(valores=="")alert("te faltra un campo")
}
}
</script>
</head>
<body>
<form name="formulario" method="get">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td><table cellpadding='3' cellspacing='3' style='border:#999999 double' bgColor='bisque' id="tablaFormulario">
<tr bgColor='#CCCCCC'>
<td width="175">Nombre</td>
<td width="175">Email:</td>

</tr>
</table></td>
</tr>
<tr>
<td align="right"><input type="button" onClick="addPerson()" value="Añadir Persona" ></td>
</tr>
<tr>
<td align="center"><input type="submit" name="enviar" value="Enviar"></td>
</tr>
<tr>
<td align="center"><input type="button" value="Sacar valores" onclick="contarTabla()"></td>
</tr>
</table>
</form>
http://www.livinbride.com/foro/showT...d=1435#msg1435
</body>
</html>

Asyolath · #2 (**permalink**) 20/04/2007, 17:38

Supongo que será un fallo al copiarlo, pero tienes algunos espacios que no deberían estar.
Para solucionar tu problema sólo prueba a poner indices como parametro de el metodo insertcell():

Código:

function addPerson(){
myNewRow = document.getElementById("tablaFormulario").insertRow(-1);
myNewRow.id=indiceFilaFormulario;
myNewCell=myNewRow.insertCell(0);
myNewCell.innerHTML="<td><input type='text' name='nombre["+indiceFilaFormulario+"]' id='nombresillo["+indiceFilaFormulario+"]' maxlength=5></td>";
//alert(myNewCell.innerHTML)
myNewCell=myNewRow.insertCell(1);
myNewCell.innerHTML="<td> <input type='text' name='email["+indiceFilaFormulario+"]'></td>";
myNewCell=myNewRow.insertCell(2);
var row=document.getElementById("tablaFormulario").rows;
var i = row.length-1
//if(i>1){myNewCell.innerHTML="<td><input type='button' value='Eliminar' onclick='removePerson(this.parentNode.parentNode.r owIndex)' >/td>>";}
myNewCell.innerHTML="<td><button type='button' name='enviar' onclick='removePerson(this.parentNode.parentNode.r owIndex)'>Eliminar</button></td>";

indiceFilaFormulario++;

}

Lo he probado con firefox y me ha salido bien.

Asyolath · #3 (**permalink**) 20/04/2007, 18:05

Ahora he encontrado otro fallo, a la hora de eliminar las filas comienza con la primera, (la que pone nombre y email), aquí te pongo la solución (en negrita lo modificado:

<script language="javascript" type="text/javascript">

var indiceFilaFormulario=1;
function addPerson(){
myNewRow = document.getElementById("tablaFormulario").insertR ow(-1);
myNewRow.id=indiceFilaFormulario;
myNewCell=myNewRow.insertCell(0);
myNewCell.innerHTML="<td><input type='text' name='nombre["+indiceFilaFormulario+"]' id='nombresillo["+indiceFilaFormulario+"]' maxlength=5></td>";
//alert(myNewCell.innerHTML)
myNewCell=myNewRow.insertCell(1);
myNewCell.innerHTML="<td> <input type='text' name='email["+indiceFilaFormulario+"]'></td>";
myNewCell=myNewRow.insertCell(2);
var row=document.getElementById("tablaFormulario").row s;
var i = row.length-1
//if(i>1){myNewCell.innerHTML="<td><input type='button' value='Eliminar' onclick='removePerson(this.parentNode.parentNode.r owIndex)' ></td>>";}
myNewCell.innerHTML="<td><button type='button' name='enviar' onclick='removePerson(this.parentNode.parentNode.parentNode.id)'>Eliminar</button></td>";

// this hace referencia a <button>, this.parentNode es el <td> que lo contiene, this.parentNode.parentNode = myNewCell y finalmente this.parentNode.parentNode.parentNode.id= myNewRow.id

indiceFilaFormulario++;

}

function removePerson(idFila){

document.getElementById("tablaFormulario").deleteR ow(idFila);
indiceFilaFormulario--;

}

function contarTabla(){
var row=document.getElementById("tablaFormulario").row s;
var i = row.length-1
alert(i)

for(r=1;r<=i;r++){
//valores=document.formulario.nombre[r].value
valores=document.getElementById("nombresillo["+r+"]").value;
alert(valores)
//if(valores=="")alert("te faltra un campo")
}
}
</script>
[/CODE]

Mickz · #4 (**permalink**) 21/04/2007, 01:33

Muchas gracias Asyolath es exactamente lo que estaba buscando, sabia que en este foro alguien tenia la respuesta a mi duda. salu2 Grax