时间戳

首页 > 解决方案 > 为什么我的代码没有为表格创建单元格？

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

问题描述

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

标签： javascripthtml-tableappendchildcreateelement

解决方案

问题是您试图直接将数字和标志附加到 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的最佳场所之一。

推荐阅读