Проблема при создании таблицы Dynami c с JS с помощью appenChild - PullRequest
Новая
       8

Проблема при создании таблицы Dynami c с JS с помощью appenChild

0 голосов
/ 26 февраля 2020

Я пытаюсь создать таблицу, имеющую в коде html просто пустую таблицу с идентификатором. Я предполагаю, что я должен сделать это с appenChild и для циклов, но инспектор chrome продолжает говорить, что что-то не так, и я просто немного расстраиваюсь. Это мой первый месячный код в JS, и иногда кажется, что это немного невозможно.

Вот мой код, на случай, если кто-то может мне помочь, я бы очень признателен:)

ps- мой код ссылки на испанском sh, надеюсь, это не проблема! 

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        td {
            background-color: blueviolet;
            width: 2em;
            height: 2em;
        }
    </style>





    <script>
        window.onload = pintarCarton;

        const MAX_COLUMNAS = 9;
        const MAX_FILAS = 3;
        var tabla = document.getElementById("carton");



        function pintarCarton()
        let tabla = document.getElementById("carton");
        let columna;
        let fila;

        for (let nFilas = 0; nFilas < MAX_FILAS; nFilas++) //Condicion FOR para las FILAS
        { //Abre corchete de accion de lo que hará el FOR relacionado con las FILAS
            fila = document.createElement("tr");
            tabla.appendChild(fila);

            for (let nColumnas = 0; nColumnas < MAX_COLUMNAS; nColumnas++)  //Condicion FOR para COLUMNAS
            {//Abre corchete de accion de lo que hara el FOR relacionado con las columnas
                columna = document.createElement("td");
                tabla.fila.appendChild(columna);

            }//Cierra corchete de accion de lo que hara el FOR relacionado con las columnas

        }//Cierra corchete de accion de lo que hará el FOR relacionado con las FILAS

    </script>
</head>
<body>
    <table id="carton"></table>
</body>

</html>

1 Ответ

0 голосов
/ 26 февраля 2020

Есть 2 проблемы: во-первых, вам не хватает скобок вокруг функции pintarCarton(), а во-вторых, ваш вызов tabla.fila.appendChild(columna) должен быть просто fila.appendChild(columna).

Причина в том, что fila не является свойством объекта tabla, поэтому вы не можете вызвать tabla.fila. Это должно быть просто fila.appendChild().

Вот полный исправленный код: (фрагмент кода выполнения) 

window.onload = pintarCarton;

        const MAX_COLUMNAS = 9;
        const MAX_FILAS = 3;
        var tabla = document.getElementById("carton");



        function pintarCarton() {
            let tabla = document.getElementById("carton");
            let columna;
            let fila;

            for (let nFilas = 0; nFilas < MAX_FILAS; nFilas++) //Condicion FOR para las FILAS
            { //Abre corchete de accion de lo que hará el FOR relacionado con las FILAS
                fila = document.createElement("tr");
                tabla.appendChild(fila);

                for (let nColumnas = 0; nColumnas < MAX_COLUMNAS; nColumnas++)  //Condicion FOR para COLUMNAS
                {//Abre corchete de accion de lo que hara el FOR relacionado con las columnas
                    columna = document.createElement("td");
                    fila.appendChild(columna);

                }//Cierra corchete de accion de lo que hara el FOR relacionado con las columnas

            }//Cierra corchete de accion de lo que hará el FOR relacionado con las FILAS
        }
td {
  background-color: blueviolet;
  width: 2em;
  height: 2em;
}
<table id="carton"></table>
...