Lio con insertBefore y nextSibling

augusto_jaramil · #1 (**permalink**) 20/11/2011, 15:29

Hola a tod@s,

En este código

Código PHP:

  <html> 
<head> 
<script language="javascript" src="pr.js" type="application/javascript"></script> 
</head> 
<body> 
  <table id="diseno"> 
      <tr> 
           <td align="rigth"> 
               <input title="Crear Columna" src="./gif/tool_add.gif" onclick="AgregaCol('0')" id="Mas_0" height="15px" type="image" width="15px"> 
           </td> 
           <td align="rigth"> 
               <input title="Crear Columna" src="./gif/tool_add.gif" onclick="AgregaCol('1')" id="Mas_1" height="15px" type="image" width="15px"> 
           </td> 
           <td align="rigth"> 
                <input title="Crear Columna" src="./gif/tool_add.gif" onclick="AgregaCol('2')" id="Mas_2" height="15px" type="image" width="15px"> 
           </td> 
       </tr> 
 
       <tr> 
           <td align="center"> 
                 <input style="text-align:center; color:blue; width:190px" value="Columna 1" name="C_1" id="C_1" type="text"> 
           </td> 
           <td align="center"> 
                 <input style="text-align:center; color:blue; width:190px" value="Columna 2" name="C_2" id="C_2" type="text"> 
           </td> 
           <td align="center"> 
                 <input style="text-align:center; color:blue; width:190px" value="Columna 3" name="C_3" id="C_3" type="text"> 
           </td> 
       </tr> 
    </table> 
</body> 
</html>

Y pr.js:

Código PHP:

  function AgregaCol(i) { 
diseno = document.getElementById("diseno"); 
lineas = diseno.getElementsByTagName("tr"); 
nuevaCelda = document.createElement("td"); 
nuevaCelda.setAttribute("class", "clasetd"); 
nuevaCelda.setAttribute("align", "rigth"); 
 
idCol="Mas_"+i; 
nuevoBtnM = document.createElement("input"); 
nuevoBtnM.setAttribute("type", "image"); 
nuevoBtnM.setAttribute("id", idCol); 
evento = "AgregaCol('"+idCol+"')"; 
nuevoBtnM.setAttribute("onClick", evento); 
nuevoBtnM.setAttribute("width", "15px"); 
nuevoBtnM.setAttribute("height", "15px"); 
nuevoBtnM.setAttribute("src", "./gif/tool_add.gif"); 
nuevoBtnM.setAttribute("title", "Crear Columna"); 
nuevaCelda.appendChild(nuevoBtnM); 
 
x = lineas[0].getElementsByTagName("td")[i]; 
 
x.parentNode.insertBefore(nuevaCelda,x.nextSibling); 
 
/* 
var ss = document.getElementById('diseno').innerHTML; 
ss = ss.replace(/>/g, "&gt;"); 
ss = ss.replace(/</g, "&lt;"); 
document.write(ss); 
*/ 
}

La idea es insertar una nueva columna en la primera linea inmediatamente después de la columna en la que se hace click en alguna de las imágenes.

Actualmente adiciona la columna después de la ultima....

Alguien puede ayudarme por favor,

Gracias de antemano

zerokilled · #2 (**permalink**) 20/11/2011, 16:12

buenas,
el script te esta funcionando bien. lo que sucede es que no lo estas viendo y aparenta ser que se agrega al final. si inspeccionas los nodos con alguna consola, debes notarlo. sucede que las celdas se corren al agregar uno nuevo para dicha fila. pero como tienes mas de una fila, entonces se descuadra al no agregar las celdas necesaria al resto de las filas.

augusto_jaramil · #3 (**permalink**) 20/11/2011, 17:13

Gracias zerokilled

Que pena con todos..... me dejates sin palabras...

Mil Gracias