Почему мой код не создает ячейки для таблицы? - PullRequest
Новая
       80

Почему мой код не создает ячейки для таблицы?

2 голосов
/ 17 января 2020

Я пытаюсь самостоятельно выучить JS, и я новичок в этом языке, но у меня есть некоторый опыт работы с C ++ и C#.
Я создаю функцию для генерации ячеек в ранее созданной таблице с данными в них, но моя программа не работает. 

<!DOCTYPE HTML>
<html>
    <body>
        <button type="button" onclick="compile()">cliccami</button>
        <table id="a"></table>
    </body>

    <script type="text/javascript">
        function compile(){
            var count = 5;
            var ris = [3, 6, 3, 3, 6];
            var halfed = [true, false, true, true, false];

            for (var i=0; i<count; i++) {
                var tra = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                td1.appendChild(ris[i]);
                td2.appendChild(halfed[i]);
                tra.appendChild(td1);
                tra.appendChild(td2);
                document.getElementById("a").appendChild(tra);
            }
        }
    </script>
</html>

Я также пытался обработать tra , td1 и td2 как массивы, созданные вне функции для .
Вы можете мне помочь?

1 Ответ

4 голосов
/ 17 января 2020

Проблема в том, что вы пытаетесь напрямую добавлять числа и флаги к элементам DOM, но DOM не позволяет вам это сделать. Вы должны поместить их в текстовые узлы. Так, например: 

td1.appendChild(document.createTextNode(ris[i]));
td2.appendChild(document.createTextNode(halfed[i]));

Но проще, если вы позволите браузеру сделать это за вас, назначив textContent: 

td1.textContent = ris[i];
td2.textContent = halfed[i];

Live Пример: 

function compile(){
    var count = 5;
    var ris = [3, 6, 3, 3, 6];
    var halfed = [true, false, true, true, false];

    for (var i=0; i<count; i++) {
        var tra = document.createElement("tr");
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        td1.textContent = ris[i];
        td2.textContent = halfed[i];
        tra.appendChild(td1);
        tra.appendChild(td2);
        document.getElementById("a").appendChild(tra);
    }
}
<button type="button" onclick="compile()">cliccami</button>
<table id="a"></table>

Однако есть еще много , и множество других способов сделать то, что вы там делаете. MDN - одно из лучших мест, где можно узнать о DOM и о JavaScript.

...