为什么我的代码没有为表格创建单元格？答案

【问题标题】：Why my code does not create cells for a table?为什么我的代码没有为表格创建单元格？
【发布时间】：2020-05-04 11:43:22
【问题描述】：

我正在尝试自学 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 视为在 for 函数之外创建的数组。你能帮帮我吗？

【问题讨论】：

检查浏览器的控制台。它会告诉你问题所在。如果您知道问题的根源，请前往MDN 并查看有关引发错误的函数的文档。

标签： javascript html-table appendchild createelement

【解决方案1】：

问题是您试图直接将数字和标志附加到 DOM 元素，但 DOM 不允许您这样做。您必须将它们放在文本节点中。比如：

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

但如果你让浏览器为你做这件事，分配给textContent会更容易：

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

现场示例：

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 的最佳场所之一。

【讨论】：