Ayuda con este código

Algadar · #1 (**permalink**) 14/12/2010, 15:52

Tengo el siguiente código

Código Javascript:

Ver originalfunction complementaria2(){
var objTabla = document.getElementById("t2");
var objTbody=objTabla.firstChild;
/*var lent=objTbody.childNodes.length;
var table=objTabla.rows[0].cloneNode(true);
objTabla.appendChild(table);*/
//alert(li++);
li++
//var val=li++;
var objNuevaFila=objTbody.childNodes[0].cloneNode(true);
//cambiamos el contenido de las celdas
objNuevaFila.childNodes[0].innerHTML="<input type=\"text\" id=\"CompCurso"+li+"\" name=\"CompCurso"+li+"\" value=\""+li+"\" size=\"2\" >";
objNuevaFila.childNodes[1].innerHTML="<input type=\"text\" id=\"CompCentro"+li+"\" name=\"CompCentro"+li+"\" >";
objNuevaFila.childNodes[2].innerHTML="<input type=\"text\" id=\"CompHoras"+li+"\" name=\"CompHoras"+li+"\" >";
objNuevaFila.childNodes[3].innerHTML="<input type=\"text\" id=\"CompObservac"+li+"\" name=\"CompObservac"+li+"\" onClick= \"muestrame(id)\" >";
objNuevaFila.childNodes[4].innerHTML="<input type=\"button\" name=\"compb\" value=\"Añadir Fila\" onClick=\"complementaria2();\">";
objTbody.appendChild(objNuevaFila);
//l es el contador de las filas de la tabla, hago -2 porque yo lo tengo inicializado a 2
//y la primera fila es la 0
objTbody.childNodes[li-2].childNodes[4].innerHTML = "&nbsp;";
//actualizamos la variable del formulario que indica el numero de filas
document.getElementById("numFilas").value = li;
//incrementamos para la siguiente fila
//li++;
document.getElementById("repet").value=li;
}
 
function add(tabla)
{
  var tblBody = document.getElementById('t2').tBodies[0];
  var newNode = tblBody.rows[0].cloneNode(true);
  tblBody.appendChild(newNode);
}

la función add() corre en cualquier navegador solo que no como yo quisiera.
la función complementaria2() corre bien pero solo en Internet Explorer.

alguien que me puede ayudar
de ante mano muchas gracias

zerokilled · #2 (**permalink**) 14/12/2010, 19:02

@algadar, no puedes simplemente venir y depositar el codigo sin explicar nada de lo que sucede. tienes que proveer la suficiente informacion, tanto en detalles como en codigos, para poder analizar el tema. entiendo lo que hace el codigo, ¿pero que parte no te funciona o cual es el resultado que esperas?

Algadar · #3 (**permalink**) 15/12/2010, 06:38

Ok, en respuesta a zerokilledYo he colocado este tema en otra oportunidad solo que no consegui ninguna respuesta decidi esperar un tiempo y dedicarme a programar otra parte del sistema, pero bueno al grano te explico
te voy a dejar el código de toda la pag.

Código:

<!DOCtype html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript">

// ANTES ESTABA ASÍ 
//var li=2;

var li=1;

function complementaria2(){
var objTabla = document.getElementById("t2");
var objTbody=objTabla.firstChild;
/*var lent=objTbody.childNodes.length;
var table=objTabla.rows[0].cloneNode(true);
objTabla.appendChild(table);*/
//alert(li++);
li++
//var val=li++;
var objNuevaFila=objTbody.childNodes[0].cloneNode(true);
//cambiamos el contenido de las celdas
objNuevaFila.childNodes[0].innerHTML="<input type=\"text\" id=\"CompCurso"+li+"\" name=\"CompCurso"+li+"\" value=\""+li+"\" size=\"2\" >";
objNuevaFila.childNodes[1].innerHTML="<input type=\"text\" id=\"CompCentro"+li+"\" name=\"CompCentro"+li+"\" >";
objNuevaFila.childNodes[2].innerHTML="<input type=\"text\" id=\"CompHoras"+li+"\" name=\"CompHoras"+li+"\" >";
objNuevaFila.childNodes[3].innerHTML="<input type=\"text\" id=\"CompObservac"+li+"\" name=\"CompObservac"+li+"\" onClick= \"muestrame(id)\" >";
objNuevaFila.childNodes[4].innerHTML="<input type=\"button\" name=\"compb\" value=\"Añadir Fila\" onClick=\"complementaria2();\">";
objTbody.appendChild(objNuevaFila);
//l es el contador de las filas de la tabla, hago -2 porque yo lo tengo inicializado a 2
//y la primera fila es la 0
objTbody.childNodes[li-2].childNodes[4].innerHTML = "&nbsp;";
//actualizamos la variable del formulario que indica el numero de filas
document.getElementById("numFilas").value = li;
//incrementamos para la siguiente fila
//li++;
document.getElementById("repet").value=li;
}

function add(tabla)
{
  var tblBody = document.getElementById('t2').tBodies[0];
  var newNode = tblBody.rows[0].cloneNode(true);
  tblBody.appendChild(newNode);
}
function muestrame(id){
	datoxt= document.getElementById(id).value;
	if (datoxt!='') {
	alert(id+" y dice "+ datoxt);
	}
	}
function mandar_form(){
	document.pag_inicio.submit();
	}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<DIV id="comp">
<FORM name="formulario" action="">
<input type="text" name="repet" id="repet" />
<INPUT type="hidden" name="numFilas" value="1"/>
<TABLE id = "t2" BORDER="2" WIDTH="90%" CELLPADDING="5" CELLSPACING="5" bordercolor="#FFcc33">
<TR>
<TD><INPUT NAME="CompCurso1" TYPE="text" VALUE="1" size="3" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompCentro1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompHoras1" ></TD>
<TD><INPUT TYPE="text" VALUE="" NAME="CompObservac1" id="CompObservac1" onClick="muestrame(id)" ></TD>
<td><input type="button" name="compb" value="Añadir Fila" onClick="complementaria2();"></td>
<td><input type="button" name="compb2" value="Añadir new" onClick="add();"></td>
</TR>
</TABLE>
<TABLE>
<TR>
<TD>
<a href="javaScript:alert(document.getElementById('numFilas').value)"> mostrar numero filas</a>
</TD>
</TR>
</TABLE>
<input type="submit" name="button" id="button" value="Guardar" onClick="mandar_form()">
</FORM>
</DIV>

<p>&nbsp;</p>
</body>
</html>

Corre ese ejemplo en IE prueba los botones y veras que el botón "Añadir fila" agrega una fila, más no se repite a si mismo, sin embargo el botón "Añadir new" te agrega la fila pero se repite a si mismo por cada fila que agrega.
el proceso que me sirve es el primer botón que te comente.
pero el problema esta es cuando corre en otros navegadores ESE proceso no funciona; no genera ningun tipo de error simplemente no lo hace.

Espero a verme explicado bien.!
....

zerokilled · #4 (**permalink**) 15/12/2010, 19:39

buenas...

el error del codigo consiste en fallos de referencias a los elementos, en especifico las filas de la tabla. iexplorer es un tanto distinto a los demas en cuanto a la creacion de la jerarquia de nodos. iexplorer, en lugar de preservar los TextNodes vacios los descarga. un TextNode vacio sucede cuando un elemento es separado de otro con caracteres white-space (espacio, salto de lineas), de modo que si compruebas la lista childNodes en distintos navegadores navegadores, veras que no tienen la misma cantidad. hay una solucion para ese problema, te recomiendo que leas el articulo de MDN solo para proposito de capacitacion. en tu caso, puesto que estas trabajando con tablas, en lugar de usar childNodes puedes usar rows para referirte a las filas.

otro detalle importante, getElementById explicitamente adquiere la referencia de un elemento por su id, mas no por name. pese a que esta horrendamente mal, el unico navegador que te acepta tomar la referencia por nombre es iexplorer.

Algadar · #5 (**permalink**) 16/12/2010, 07:10

Perfecto, tomare tu recomendación por el rows el problema es como hago referencia a los objetos para obtener el value de cada uno de ellos y almacenar esos datos en BD.?

es por eso que me fui por la opción del childNodes. Ya que me permitia crear objetos con ID distindos y de esa manera poder obtener los datos que se coloquen en los Text que estan dentro de la tabla. Eso es lo que necesito.!

zerokilled · #6 (**permalink**) 16/12/2010, 20:16

buenas...

siempre y cuando sean metodos estandar, en realidad no importa mucho el metodo para llegar a un elemento y trabajar con el. childNodes es una forma, getElementsByTagName es otra, getElementsByName tambien. la unica diferencia es que segun la metodologia puedes obtener ciertos elementos especificos con los que deseas trabajar. el punto es que con childNodes no solo obtienes nodos del tipo elemento, sino casi de cualquier tipo. dada la diferencia que existe en iexplorer, childNodes no me parece el mas adecuado a no ser que tomes ciertas medidas el cual explica el articulo.

a lo que voy es, con rows obtienes especificamente elementos TR, y una vez tengas la fila puedes usar cells el cual contiene celdas de dicha fila. una vez obtienes la celda, puedes hacer exactamente lo mismo que hacias con childNodes. en tu caso, crear IDs distintos para los campos. un ejemplo aplicado...

Código:

// clone es el clon de una fila;
clone.cells[0].innerHTML = ...;
clone.cells[1].innerHTML = ...;
clone.cells[2].innerHTML = ...;
...

para que puedas tomar el valor en el servidor es importante que cada campo tenga un nombre, no un id.