为什么我的代码不为表格创建单元格？

问题描述 投票：0回答：1

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

javascript html-table appendchild createelement
1个回答
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的最佳场所之一。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.