Duda con Nodos

Nano_ · #1 (**permalink**) 01/08/2006, 15:43

Tengo la siguiente funcion

Código HTML:

	function mostrar_detsec5()
		{
		var objTablae = document.getElementById("detsec5");
		var objTbodye=objTablae.firstChild;
		var objNuevaFilae=objTbodye.childNodes[0].cloneNode(true);

		objNuevaFilae.childNodes[0].innerHTML = "<input type =\"text\" name =\"secuencia"+l+"\"  id =\"secuencia"+l+"\"  maxlength=\"2\" size=\"1\" align=\"right\" disabled class=\"cajita\" >";
    objNuevaFilae.childNodes[1].innerHTML = "<select name=\"prueba"+l+"\" size=\"1\"></select>";
  	objNuevaFilae.childNodes[2].innerHTML = "<textarea name =\"descrip"+l+"\"  id =\"descrip"+l+"\"  cols=\"24\" rows=\"7\" value=\"\" class=\"combo\" onchange=\"mays(this)\"> </textarea>";
    objNuevaFilae.childNodes[3].innerHTML = "<input name=\"criterio"+l+"\" id=\"criterio"+l+"\" type=\"text\" size=\"15\" maxlength=\"20\" value=\"\" class=\"cajita1\"  />";
    objNuevaFilae.childNodes[4].innerHTML = "<input name=\"criterio"+l+"\" id=\"criterio"+l+"\" type=\"text\" size=\"15\" maxlength=\"20\" value=\"\" class=\"cajita1\"  />";
   	objTbodye.appendChild(objNuevaFilae);

		document.getElementById('desmate'+l).focus();
		document.getElementById('numfila5').value=l;
		k = l + 1;
		document.getElementById('secuencia'+1).value=k;
    l++;
		}

basicamente lo que hace es clonar un table .
Mi pregunta es: Como hago para que me conserve el orden que yo tengo en mi table que estoy clonando (me guarde la estrucura de <tr>s y <td>s), ya que despues de terminar un </tr> y al abrir uno nuevo no me lo conserva, me lo esta dejando todo en una sola fila .. Bueno espero que me halla dado a enteder..

Gracias y Hasta Pronto!

Nano_ · #2 (**permalink**) 02/08/2006, 15:19

Ni una ideaaaa...

Cap.Buscapina · #3 (**permalink**) 02/08/2006, 17:12

estas haciendo un ingerto que será dificil hacerlo funcionar.

a mi criterio, dos opciones:

1.-Trabajar todo con innerHTML
2.- Trabajar todo con DOM

o uno, o el otro.
si no se te va a complicar grande la cosa.

Nano_ · #4 (**permalink**) 02/08/2006, 19:20

ok.. gracias por tu consejo pero me podrias dar un ejemplo o una pagina web donde pueda saber como trabajar con innerhtml o DOM lo qe necesito

caricatos · #5 (**permalink**) 02/08/2006, 19:56

Hola:

Un ejemplo: Inspector DOM

Espero que no tengas problemas con el código.

Saludos

Nano_ · #6 (**permalink**) 03/08/2006, 08:13

Hola caricatos gracias por tu ayuda pues el codigo como tal lo entendi, la duda que tengo es como hago para que un nodo me quede con atributos colspan y rowspan.. Bueno te dejo el codigo de el fomulario para que me entiendas mejor cual es el table que necesito "duplicar" o "clonar"..

Hasta pronto y gracias

Código HTML:

<html>
<head>
	<link href="estiloorigen.css" rel="stylesheet" type="text/css">
	 <script language="javascript" src="datos.js">
	 </script>
</head>
<body background="Imagenes/fondo.jpg">
    <title></title>
    <form name="forma10" id="forma10" method="POST" action="forma10.php" enctype="multipart/form-data">

	  	<table width="770" border="1" cellspacing="0" cellpadding="0" class="tabla" align="center">
				<tr class="row3">
					<td  width="8%">5. Item Number</td>
					<td  width="30%">6. NANDINA</td>
        	<td  width="28%">7. Number and kind of packages; description of goods</td>
          <td  width="17%">Cantidad</td>
					<td  width="17%">8. Origin Criterion (See Notes Overleaf)</td>
				</tr>
    </table>
   	<div id="seccion5">
     <table id="detsec5" width="770" border="1" cellspacing="0" cellpadding="0" class="tabla" align="center">
        <tr class="row2">
			     <td width="8%" rowspan="5"><input name="secuencia0" id="secuencia0" type="text" size="1" maxlength="2" value="1" align="right" class="cajita" disabled/></td>
     	   <td align="center" width="8%">
         <select name="prueba0" size="1"><option>Prueba</option></select>
    				</td>
		    <td width="30" rowspan="5"><textarea name="descrip0" id="descrip0" type="text" cols="24" rows="7" value="" align="right" onChange="mays(this)">Seleccione la partida arancelaria..</textarea></td>
          <td width="17%"><input name="cantidade0" id="cantidade0" type="text" size="4" maxlength="3" value="" align="right" onChange="mays(this)" class="cajita"/></td>
			 		<td ><input name="criterio0" id="criterio0" type="text" size="15" maxlength="20" value="" class="cajita1"  /></td>
</tr>
    <tr class="row3">
    		 <td>6. Marks and Number of packages</td>
    		 <td>Peso Neto</td>
    		 <td>Gross weight or other quatity</td>
    </tr>
		<tr>
		    <td width="30%" rowspan="5"><textarea name="marca0" id="marca0" type="text" cols="25" rows="3" value="" align="right"></textarea></td>
      	<td><input name="pesoneto0" id="pesoneto0" type="text" size="15" maxlength="20" value="" class="cajita1"/></td>
    		<td><input name="gross0" id="gross0" type="text" size="15" maxlength="20" value="" class="cajita1"/></td>
   	</tr>
   	<tr class="row3">
        <td>Valor FCA</td>
        <td>Number and date of invoices</td>
    </tr>
    <tr>
    	   <td><input name="valorfca0" id="valorfca0" type="text" size="15" maxlength="20" value="" class="cajita1"/></td>
           <td><input name="Fecha0" type="text" id="Fecha0" size="10"  maxlength="10" onChange="mays(this)">
        		
             </td>
           </tr>
     		</table>
			<table width="760" border="0" cellspacing="0" cellpadding="0"  align="center">
				<tr align="center">
					<td align="center"><input type="button" name="bcanex" id="bcanex" value="Adicionar Articulo" onClick="pre_mostrar_detsec5()"></td>
          <td><input name="numfila5" id="numfila5" type="hidden" size="3" maxlength="3"  disabled class="cajita" /></td>
				</tr>
			</table>
	</div>
  </form>
 </body>
</html>

caricatos · #7 (**permalink**) 03/08/2006, 08:29

Hola:

Bueno, no he visto ningún código javascript, pero en las notas finales del inspector hay un enlace para cargar una página con una tabla, y en las celdas se puede ver que los atributos son colSpan y rowSpan (S mayúscula... son cosas estrictas)

Saludos

Nano_ · #8 (**permalink**) 03/08/2006, 08:43

Hola... ya e mirado varias veces y no la encuentro ahi es una tabla con 1 columna y 4 filas

....

Nano_ · #9 (**permalink**) 04/08/2006, 10:16

Saludos.. Bueno despues de buscar y buscar pude sacar la funcion que necesitaba ahi se las dejo para que la miren y analizen por si alguna vez tienen que programar algo similar

Funcion JavaScript

Código HTML:

//Declaracion de la variable contador para que todos los name de la forma queden diferentes 
var contador = 0;

function mostrar_detsec5()
{

	contador++;
//Llamado del div de la forma y que sea visbile para el usuario
	var newFields = document.getElementById('seccion5').cloneNode(true);

	newFields.id = '';
	newFields.style.display = 'block';

//Llamamos los nodos hijos de la forma
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++)
	{
//Al nodo hijo los incrementamos (todos los campos de la forma) .
		var theName = newField[i].name
		if (theName)
			newField[i].name = theName + contador;
	}
//La copia es lista ahora es insertada en el documento.
	var insertHere = document.getElementById('Adicionar');

	insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = mostrar_detsec5;

Formulario html

Código HTML:

 <div id="seccion5" style="display: none">
	<p class="hr"> </p>
//Borra 
	<input type="button" value="Eliminar Articulo" style="font-size: 10px" onClick="this.parentNode.parentNode.removeChild(this.parentNode);">

//TAble
................
//Fin del codigo
</div>
<span id="Adicionar"></span>
    <input type="button" style="font-size: 10px" value="Adicionar Articulo" onClick="mostrar_detsec5()">

Bueno hasta pronto y espero que les sea de ayuda!!

Nano_ · #10 (**permalink**) 08/08/2006, 13:22

SAludos bueno en la funcion que puse con anterioridad no se por que no me esta funcionando bien el contador en los name exactamente el for

... le agreadeceria si alguien sabe el error ya que no veo ningun error logico pero pues lo debo tener por que si no me funciona bin es por algo jejeje

...

SAludos y les agradeceria una pronta ayuda

Hasta Pronto!

Nano_ · #11 (**permalink**) 08/08/2006, 16:36

Saludos de nuevo

.. Bueno ya se cual es el inconventiente que tengo con la funcion. lo que ocurre es que ella no me esta tomando los nodos de los tr ya que si la declaro directamente en un div, si un table me funciona correctamtente. La pregunta como puedo implementar el manejo de lso nodos de los tr.. TEnia pensado algo asi como

Código HTML:

function anadir() {
  tab = document.getElementById('tabla');
  fil = document.getElementsByTagName('tr')[0].cloneNode(true);
  fil1 = document.getElementsByTagName('tr')[1].cloneNode(true);
  fil2 = document.getElementsByTagName('tr')[2].cloneNode(true);
  fil3 = document.getElementsByTagName('tr')[3].cloneNode(true);
  fil4 = document.getElementsByTagName('tr')[4].cloneNode(true);
 
 tab.appendChild(fil);
 tab.appendChild(fil1);
 tab.appendChild(fil2);
 tab.appendChild(fil3);
 tab.appendChild(fil4);

}

Pero la quiero incluir dentro de mi otra funcion.. Bueno espero que me halla hecho entender.. Ademas si me pudieran dar una ayuda hoy se los agradeceria haber si salgo de esto pronto!...

GRacias !