Ayuda Con insertBefore y nextSibling por favor
Publicado por AJaramillo (7 intervenciones) el 20/11/2011 22:20:55
En este código html
<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 class="clasetd" align="center">
<input style="text-align:center; color:blue; width:190px" value="Columna 1" name="C_1" id="C_1" type="text">
</td>
<td class="clasetd" align="center">
<input style="text-align:center; color:blue; width:190px" value="Columna 2" name="C_2" id="C_2" type="text">
</td>
<td class="clasetd" 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 este js:
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, ">");
ss = ss.replace(/</g, "<");
document.write(ss);
*/
}
La idea es insertar una nueva columna inmediatamente después de la columna en la que se hace click en alguna de las imágenes de la primera linea.
Actualmente adiciona la columna después de la ultima....
Alguien puede ayudarme por favor,
Gracias de antemano
<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 class="clasetd" align="center">
<input style="text-align:center; color:blue; width:190px" value="Columna 1" name="C_1" id="C_1" type="text">
</td>
<td class="clasetd" align="center">
<input style="text-align:center; color:blue; width:190px" value="Columna 2" name="C_2" id="C_2" type="text">
</td>
<td class="clasetd" 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 este js:
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, ">");
ss = ss.replace(/</g, "<");
document.write(ss);
*/
}
La idea es insertar una nueva columna inmediatamente después de la columna en la que se hace click en alguna de las imágenes de la primera linea.
Actualmente adiciona la columna después de la ultima....
Alguien puede ayudarme por favor,
Gracias de antemano
Valora esta pregunta
0