No logro ver la imagen....

augusto_jaramil · #1 (**permalink**) 15/11/2011, 14:02

Hola a tod@s,

Con este código

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
 
function crearCell(par){ 
    var x=document.getElementById('myTable'); 
    var as = x.getElementsByTagName('td'); 
    var y=x.rows[0].insertCell(par); 
    as[par].id="nuevo"; 
    darAtributosBtn(as[par].id); 
} 
 
function darAtributosBtn(i) { 
    celda = document.getElementById(i); 
    celda.setAttribute("type","img"); 
    celda.setAttribute("src","./gif/tool_add.gif"); 
    celda.setAttribute("width","15px"); 
    celda.setAttribute("height","15px"); 
    celda.setAttribute("onClick","alerta();"); 
} 
 
function alerta() { 
   alert("LLEGO"); 
} 
</script> 
</head> 
 
<body> 
<form> 
<table id="myTable" border="1"> 
<tbody> 
<tr> 
<td id="uno">Celda uno<img src="./gif/tool_add.gif" onClick="crearCell(1);"></td> 
<td id="dos">Celda dos</td> 
</tr> 
</tbody> 
</table> 
</form> 
</body> 
</html>

La idea es insertar una celda entre las dos existentes. Esta nueva celda ha de contener una imagen. La celda efectivamente se crea, es mas, haciendo click en el espacio que me crea (nueva celda) se activa la función alertar.... Solo me falta ver la imagen

Colo lo hago?

Gracias de antemano por su ayuda

Un Cordial Saludo

maycolalvarez · #2 (**permalink**) 15/11/2011, 14:08

en principio revisa la ruta de la imágen, ése punto no debe ir:

./gif/tool_add.gif

augusto_jaramil · #3 (**permalink**) 15/11/2011, 14:15

Revisé la ruta, la puse completa y sigue igual.....

augusto_jaramil · #4 (**permalink**) 15/11/2011, 17:17

Hola de nuevo,

Según he visto, el insertCell crea un tag TD (lo que es lógico).... Se puede cambiar el TD por IMG o algún otro tag (INPUT, SELCT, etc)? Cómo se haría?

augusto_jaramil · #5 (**permalink**) 15/11/2011, 20:30

Hola de nuevo,

Por ahí pude cambiar el tag de TD a INPUT con este código:

Código:

<html>
<head>
<script type="text/javascript">

function addCell(par){
    var x=document.getElementById('myTable');
    var as = x.getElementsByTagName('td');
    var y=x.rows[0].insertCell(par);   //Crea la nueva celda (<td></td>)
    as[par].id="nuevo";    // Asigno id a la etiqueta

    var elem = document.getElementById('nuevo');
    var children = elem.childNodes;
    var padre = elem.parentNode;
    var nodo_nuevo = document.createElement("input");  // Creo un nuevo input
    for (var i=0; i<children.length; i++) {
        newNode.appendChild(children[i]);
    }
    padre.replaceChild(nodo_nuevo, elem);  // Reemplazo la etiqueta <td> por <input ...>
    var as = x.getElementsByTagName('input');
    as[0].setAttribute("id","nuevo");                  // Asigno Atributos
    as[0].setAttribute("type","image");
    as[0].setAttribute("src","./gif/tool_add.gif");
    as[0].setAttribute("width","15px");
    as[0].setAttribute("height","15px");
    as[0].setAttribute("onClick","alerta();");
/*
var ss = document.getElementById('myTable').innerHTML;
ss = ss.replace(/>/g, "&gt;");
ss = ss.replace(/</g, "&lt;");
document.write(ss);
*/
}

function alerta() {
   alert("LLEGO");
}
</script>
</head>
<body>
<form onSubmit="return false;">
<table id="myTable" border="1">
<tbody>
  <tr> 
    <td id="uno">Celda uno<img src="./gif/tool_del.gif" onclick="addCell(1);"></td>
    <td id="dos">Celda dos</td>
   </tr>
 </tbody> 
</table>
</form>
</body>
</html>

Lo que puedo observar es que si el insertCell() crea <td></td> con este código me elimina la etiqueta de cierre... (grave la vaina).

Es muy factible que se pueda mejorar... recibo sugerencias y ayudas....

Otra cosa y que a lo seguro es que no sea tema de este foro, pero lo comento. He notado que desde hace dias los codigos js que construyo de un momento a otro se inventa un reload de la pagina, por lo que me veo obligado de incluir en la etiqueta form el onSubmit="return false;"... aunque eso me oblgue a trabajar con ajax.

Trabajo en ambiente Linux, OpenSuse 11.4, he actualizado el FireFox de version 7 a version 8, pensando que tal vez era lio de la version del navegador, pero pailas, sigo en las mismas. Igual sucede con Opera....

Saludos