1

Alguien podría decirme por qué mi script en un documento nuevo en el que solo copio el script sí funciona sin embargo cuando lo meto en un documento html no?

Gracias de antemano.

El código es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" href="estilos.css" />
</head>

<body>
    <p>TABLERO DE DIBUJO EN JAVASCRIPT</p>
    <table width="500" border="1" id="paleta" summary="Tabla de selección de colores">
        <caption>Haga click en un color para comenzar a pintar</caption>

        <tr><td class="color1 seleccionado"></td><td class="color2"></td><td class="color3"></td><td class="color4"></td><td class="color5"></td><td class="color6"></td></tr>
        <tr><td colspan="6" id="pincel">Estado del pincel</td></tr>
    </table>
    <p></p>
    <div id="zonadibujo">

        <table id="tablerodibujo"></table>

        <script type="text/javascript">

            var elementoTable = document.createElement("table");


            for(f=0; f<30; f++){            

                var elementoTR = document.createElement("tr");


                for(c=0; c<30; c++){


                    var elementoTD = document.createElement("td");
                    elementoTR.appendChild(elementoTD);

                }

                elementoTable.appendChild(elementoTR);

            }

            document.getElementById("tablerodibujo").appendChild(elementoTable);
        </script>
    </div>
</body>
</html>
2
  • 1. ¿Por qué usas HTML 4? Debe ser un caso bien particular para usar una versión bien vieja. 2. ¿Tú entenderías si alguien te dice simplemente "no funciona"? Siempre especifica el error que tienes. 3. ¿Por qué pones la etiqueta script dentro de una tabla? No lo hagas, semánticamente está mal, ponlos antes del cierre del body. 4. ¿Por qué pones una tabla dentro de otra? Si bien la W3C no menciona que sea inválido, no tiene mucho sentido hacerlo. En tu caso, en lugar de crear una tabla en el script, crea un elemento tbody, además, especifica las cabeceras en el HTML.
    – gugadev
    el 25 abr. 2017 a las 12:21
  • Uso HTML 4 porque es un trabajo de clase y el profesor nos lo dio así, el html nos lo dio él. Y sí, cierto, el error era básicamente que no imprime nada el navegador. O sea que la última opción que me dijiste no me vale porque el html no lo puedo modificar.
    – Jopimar
    el 25 abr. 2017 a las 13:19

2 respuestas 2

2

No entiendo qué quieres que imprima si añades celdas vacías. Es decir, ¿qué se espera que se muestre si no hay datos? Las celdas están allí, pero no ves nada porque no tienen ningún valor. Además, como te dije en un comentario, lo que debes añadir a la tabla es un tbody, no otra tabla.

Este es tu mismo código, pero añadiendo valores a las celdas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" href="estilos.css" />
</head>

<body>
    <p>TABLERO DE DIBUJO EN JAVASCRIPT</p>
    <table width="500" border="1" id="paleta" summary="Tabla de selección de colores">
        <caption>Haga click en un color para comenzar a pintar</caption>

        <tr><td class="color1 seleccionado"></td><td class="color2"></td><td class="color3"></td><td class="color4"></td><td class="color5"></td><td class="color6"></td></tr>
        <tr><td colspan="6" id="pincel">Estado del pincel</td></tr>
    </table>
    <p></p>
    <div id="zonadibujo">

        <table id="tablerodibujo">
          
        </table>

        <script type="text/javascript">

            var elementoTable = document.createElement("tbody");


            for(f=0; f<30; f++){            

                var elementoTR = document.createElement("tr");


                for(c=0; c<30; c++){


                    var elementoTD = document.createElement("td");
                    elementoTD.textContent = c;
                    elementoTR.appendChild(elementoTD);

                }

                elementoTable.appendChild(elementoTR);

            }

            document.getElementById("tablerodibujo").appendChild(elementoTable);
        </script>
    </div>
</body>
</html>

1
  • Vale, el problema no estaba en ese documento sino en la hoja de estilos que tenía declarados "tablerodibujo" y "zonadibujo" como class cuando son id, y era por eso que no me imprimía los estilos que le asignara. Que es lo que me chocaba, que aunque nu tuviesen valores las celdas, se deberían de ver igual, Muchas gracias por la ayuda!
    – Jopimar
    el 25 abr. 2017 a las 14:32
0

Crea una función y asígnala al evento onload de la página, de esta forma te aseguras de que el script se ejecute cuando la página haya cargado completamente.

<script type="text/javascript">
    window.onload = dibujarTabla;

    function dibujarTabla() {
        var table =  "<table border='1'>";
        for (f = 0; f < 30; f++) {
            table += "<tr>";
            for (c = 0; c < 30; c++) {
                table += "<td></td>";
            }
            table += "</tr>";
        }
        table += "</table>";

        document.getElementById("tablerodibujo").innerHTML = table;
    }  
</script>

Reemplaza la etiqueta table del elemento tablerodibujo por un div y todo debería funcionar correctamente.

<div id="zonadibujo">
    <div id="tablerodibujo"></div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.