Duda js

abarrero90 · #1 (**permalink**) 29/03/2013, 09:38

Buenas tardes a todos. Tengo una duda y creo que cualquiera que sepa algo de js podrá solucionarla.

Una parte del código de mi página consiste en crear una tabla de imágenes (código debajo), y me gustaría añadir un botón debajo de la tabla, como nuevo elemento dentro de mi DOM, y no como parte
del elemento "table". ¿Alguien podría indicarme como debería usar los métodos appendChild, y parentNode para esto, o bien si existe una manera más sencilla de hacerlo?.

Muchas gracias, un saludo.

Código Javascript:

Ver originalvar tabla = '<table id="myTable" align="center" frame="box" border="2" width="80" "height="80"" style=background-image:url("puzzle.jpg") >';
tabla += '<TR><TD><IMG width="100" height="100" src='+img_array[0]+' id="img0" onClick="Mover('+"'img0'"+',0)"></TD><TD><IMG width="100"  height="100" src='+img_array[1]+' id="img1" onClick="Mover('+"'img1'"+',1)"></TD><TD><IMG width="100" height="100" src='+img_array[2]+' id="img2" onClick="Mover('+"'img2'"+',2)"></TD><TD><IMG width="100" height="100" src='+img_array[3]+' id="img3" onClick="Mover('+"'img3'"+',3)"></TD></TR>';

zerokilled · #2 (**permalink**) 29/03/2013, 09:45

buenas...
una vez agregado la tabla al documento, utilizas la misma referencia del elemento donde hayas agregado la tabla para agregar el botón. digamos que container es la referencia donde quieres agregar la tabla, y boton es el elemento a agregar luego de la tabla. entonces,

Código:

container.innerHTML = tabla;
container.appendChild(boton);

ya que tu tabla es un string, debes velar de crear correctamente el html. por ejemplo, te falta el cierre de la tabla </table>.

abarrero90 · #3 (**permalink**) 30/03/2013, 12:21

Gracias por responder. He probado lo que dices pero el botón se me crea dentro del elemento tabla, y me gustaría tenerlo fuera. Dejo el código para ver si le puedes echar un vistazo.

Código Javascript:

Ver originalvar tabla= document.getElementById("Form").innerHTML=tabla;
    
 
 
    tab = document.getElementById("myTable");
    contenedor = document.createElement('div');
    contenedor.id = 'boton';
    tab.appendChild(contenedor);
    
    
    boton = document.createElement('input');
    boton.type = "button";
    boton.value = "comprobar";
    boton.align = "center";
    boton.onclick = function() {Terminado()}
 
    contenedor.appendChild(boton);

zerokilled · #4 (**permalink**) 30/03/2013, 21:11

menos mal no publiqué el código porque de alguna forma terminé haciendo otra cosa completamente distinta; editar el contenido de un elemento con un textarea.

en todo caso, es muy difícil probar tu código si no muestras algo más completo. quizas, si incluyes imagenes podría servir como apoyo a tu consulta.

abarrero90 · #5 (**permalink**) 31/03/2013, 05:20

La siguiente imagen es el puzzle. Como puedes observar debajo está el botón "comprobar", pero me gustaría tenerlo debajo de la tabla y no dentro de ella. ¿Cómo puedo hacer esto?.

Saludos y gracias.

zerokilled · #6 (**permalink**) 31/03/2013, 16:33

en realidad no está dentro de la tabla per se, más bien queda dentro de la interfaz del puzzle. si quieres poner el botón fuera de esa interfaz, tienes que subir un nivel en el DOM antes de agregar el botón. es decir, agregas el botón en el elemento padre (container.parentNode) del contenedor de la tabla. si no te funciona el elemento padre, intenta en el elemento hermano del contenedor de la tabla (container.parentNode.nextSibling). que conste que estoy adivinando, porque el lugar correcto dependerá de la estructura de tu documento.

emprear · #7 (**permalink**) 31/03/2013, 19:08

Veo por ahi que tu tabla es una variable con la cual hacés innerHTML al contenedor, en ese caso, debería ser asi

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<script type="text/javascript">
//<![CDATA[
 
var tabla = "<table border='1'><tr><td>A</td></tr><tr><td>B</td></tr></table>";
window.onload = function(){
var contenedor = document.getElementById('contenedor');
contenedor.innerHTML = tabla;
   boton = document.createElement('input');
    boton.type = "button";
    boton.value = "comprobar";
    boton.align = "center";
    boton.onclick = function() {Terminado()}
    contenedor.appendChild(boton);
}
 
//]]>
</script>
</head>
<body>
<div id="contenedor">
</div>
</body>
</html>

El contenedor, también deberías crearlo ó no? hay un elemento de id Form que me despista un poco.
Saludos

abarrero90 · #8 (**permalink**) 03/04/2013, 12:36

Perfecto zerokilled, modificando esta línea el botón aparece fuera de la tabla. Ahora me hago mejor una idea del árbol DOM.

Código HTML:

Ver originaltab.parentNode.appendChild(contenedor);

Emprear, muchas gracias por el aporte, pero de momento estoy con HTML4 + javascript. En unas pocas semanas comenzaré a preguntar cosas de HTML5

emprear · #9 (**permalink**) 03/04/2013, 12:55

Cita:

Iniciado por abarrero90

Perfecto zerokilled, modificando esta línea el botón aparece fuera de la tabla. Ahora me hago mejor una idea del árbol DOM.

Código HTML:

Ver originaltab.parentNode.appendChild(contenedor);

Emprear, muchas gracias por el aporte, pero de momento estoy con HTML4 + javascript. En unas pocas semanas comenzaré a preguntar cosas de HTML5

lo que puse de html5 solo tiene el Doctype, en html 4 ó xhtml sería lo mismo

Saludos

abarrero90 · #10 (**permalink**) 03/04/2013, 13:36

Ahora estoy intentando añadir otro elemento, pero en este caso es una tabla. La consola web del navegador me da un error de indexado de la imagen, cito:

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild] @ file:puzzle.html:69

Este es el código que estoy usando. Es basicamente igual que el del botón, pero parece ser que hay algún problema con el elemento tabla. A ver si encontráis vosotros el error!!.

Código Javascript:

Ver originaltab = document.getElementById("myTable");
            contenedor = document.createElement('div');
            contenedor.id = "tabla_tiempos";
            tab.parentNode.appendChild(contenedor);
 
            //TablaTiempos = document.createElement('table');
            var texto=document.createTextNode("Hello World");
            texto.align = 'left';
            
            var TablaTiempos = '<table id="TablaTiempos" align="left" frame="box" border="2" width="80" "height="80"" >';
            
            TablaTiempos += '<TR><TD><"ola"></TD><TD><"adios"></TD><TD><"que tal"></TD><TD></TD></TR>';
 
            contenedor.appendChild(TablaTiempos);

Muchas gracias!!!.

emprear · #11 (**permalink**) 03/04/2013, 14:02

Por que TablaTiempos no es un elemento, es una cadena, deberías

Código HTML:

Ver originalcontenedor.innerHTML = TablaTiempos;

ó crear un elemento TablaTiempos, agregarle las filas, celdas y depues hacerle un appenChild al contenedor, en mi ejemplo anterior equivaldría a lo que hice con el boton
SAludos

abarrero90 · #12 (**permalink**) 03/04/2013, 14:32

Conseguido, muchas gracias.