Question

我正在学习JavaScript并进入我书中描述创建新的DOM元素（如表，行和列）的部分，因此我想创建一个类似于元素周期表的表，以后我可以返回当我学到新东西的时候，并且随便摆弄。我的问题是，从我到目前为止所理解的一切，这段代码应该有效。除了它没有显示任何内容，并且FireFox v29.0中的控制台中没有任何内容显示。

理想情况下，我想创建7行（句点）和18列（组），然后显示表中这些位置关联的元素，然后尝试格式化（例如，插入空单元格）在元素1和18之间，因为那个时期中唯一的元素是氢（1）和氦（2）。这里可以看到一个例子：http://www.webelements.com/

然而，我的第一个任务（创建一个基本表）似乎不起作用，要么我使用了错误的术语，要么之前没有人发布过这个（和“javascript periodic table”链接主要只是为了像http://www.webelements.com/）之类的东西。关于我在这里缺少什么的想法？

<html>
    <head>
        <title>Periodic Table</title>
    </head>
    <body>
        <script>

            var periodicTable = createTable( 7, 18);

            var period = 7;
            var group = 18;

            document.body.appendChild(periodicTable);
            function createTable( period, group ) {
                var elementId = 0;
                var table = document.createElement('table');
                for (var p = 1; p < period; ++p) {
                    var tr = table.appendChild(document.createElement('tr'));
                    for (var g = 1; g < group; ++g) {
                        var element = tr.appendChild(document.createElement('td'));
                        element.innerHTML = ++elementId;
                    }
                }
                return table;
            }
        </script>
</html>

修改根据以下有用的评论，我已将代码更改为：

        <script>

            var periodicTable = createTable( 7, 18);

            document.body.appendChild(periodicTable);
            function createTable( period, group ) {
                var elementId = 0;
                var table = document.createElement('table');
                for (var p = 1; p < period; ++p) {
                    var tr = table.appendChild(document.createElement('tr'));
                    for (var g = 1; g < group; ++g) {
                        var element = tr.appendChild(document.createElement('td'));
                        element.innerHTML = ++elementId;
                    }
                }
                return table;
            }
        </script>

Answer 1

在原始代码中，你有这个：

var periodicTable = createTable( 7, 18);
var period = 7;
var group = 18;
document.body.appendChild(periodicTable);
function createTable( rows, cols ) {
                 :
    for (var p = 1; p < period; ++p) {
        var tr = table.appendChild(document.createElement('tr'));
        for (var g = 1; g < group; ++g) {...}
    }
    return table;
}

思想var被悬挂，即变量在范围的开头声明，它们未被初始化，值被分配到满足任务的地方。代码period和group的值undefined，直到给定值，createTable执行完毕后才会显示。{/ p>

您将两个参数传递给createTable()，其名称为rows和cols。但是，当您需要这些值时，您使用全局变量period和group，它们在执行函数时为undefined（它们在函数之后得到它们的值已经完成了。）

要解决此问题，只需将参数rows和cols重命名为period和group，并考虑删除全局变量（如果在其他地方不需要它们） ofcourse）。

在JavaScript中创建的表不显示;控制台没有错误？

1 个答案: