Problem with loop for

Question

Problem with loop for

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Could someone tell me why my script in a new document in which I only copy the script does work though when I put it in an html document?

Thanks in advance.

The code is this:

<!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>

javascript html

asked by Jopimar 25.04.2017 в 13:55

source

2 answers

0

Create a function and assign it to the onload event on the page, this way you make sure that the script executes when the page has fully loaded.

<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>

Replace the table tag of the dashboard element with a div and everything should work correctly.

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

answered by 25.04.2017 в 17:46

Error class vector_t C ++ Problem when displaying the contents of an array in a file

score 2 · Accepted Answer

I do not understand what you want to print if you add empty cells . That is, what is expected to be shown if there is no data? The cells are there, but you do not see anything because they have no value. Also, as I said in a comment, what you should add to the table is a tbody , not another table.

This is your same code, but adding values to the cells:

<!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>