用JavaScript填充表格

Question

我正在尝试动态创建表格并使用特定数量的单元格填充它，具体取决于视口的宽度。我还想确保在页面加载时屏幕的宽度调整（不仅仅是常规屏幕尺寸）。

以下是我到目前为止所尝试的内容，此代码位于window.onload函数中：

的JavaScript

        var table = document.getElementById('instagram_table_body');

        /* Number of elements per row */
        var rowElems = Math.floor(screen.width / 152);

                    /* Number of rows */
        var rowCount = Math.ceil(data.length / rowElems);

        var globalCounter = 0;

        for (var i=0; i<rowCount; i++) {
            var tr = document.createElement('tr');

            for (var j = 0; j < rowElems; j++) {
                var td = document.createElement('td');
                var img = document.createElement('img');
                var a = document.createElement('a');

                a.href = data[globalCounter].images.standard_resolution.url;

                img.src = data[globalCounter].images.thumbnail.url;

                tr.appendChild(td.appendChild(a.appendChild(img)));

                globalCounter++;
            }
            table.appendChild(tr);
        }

问题是此代码不输出任何内容，并且实际上没有tr附加到表正文。 我知道使用的数据是有效的（来自AJAX调用并在常规动态表中显示它可以正常工作。

这个问题似乎与孩子追加过程或我将行附加到表格的那一刻有关，我还不能发现它。

注意：我正在尝试尽可能高效，这是jQuery不存在的主要原因。 （它实际上仅用于$.get和$.post方法）

JSFiddle

Answer 1

如果数据列表中的rowElems*rowCount个项目的数量少于偶数，那么您将超出数据数组。

例如，假设您的阵列中有7个项目，但屏幕上只能容纳6个项目。您将遍历元素[0-5]，将它们附加到表对象，然后增加行数。然后，你循环遍历元素[6-11]，但你的数组只包含7个对象。

您应该只看到最后一个表格行无法显示。如果您的数据集中只有一行，则表格中根本看不到任何内容，因为永远不会达到对table.appendChild(tr)的调用。

此外，Diodeus对操作的评论是好的。

Answer 2

根据 Diodeus 和 KyleFransham 的提示，我找到了一种方法来防止最后一行崩溃，导致我Object.keys(data).length;。

我创建一个变量来获取我的JSON对象的长度。然后，在我的for... in循环结束时，如果我的globalCounter等于我的对象长度，我就知道了。如果是的话，我就会摆脱循环！

我在testing performance myself后改为innerHTML，而不是appendChild()方法。

的JavaScript

var table = document.getElementById('instagram_table_body');
var elemCount = Object.keys(data).length;
/* Number of elements per row */
var rowElems = Math.floor(screen.width / 152);

/* Number of rows */
var rowCount = Math.ceil(data.length / rowElems);

var globalCounter = 0;

for (var i = 0; i < rowCount; i++) {
    var tr = "<tr>";

    for (var j = 0; j < rowElems; j++) {
        var td = ('<td><a href="' + data[globalCounter].images.standard_resolution.url + '"><img src="' + data[globalCounter].images.thumbnail.url + '"/></a></td>');

        tr += td;

        globalCounter++;

        if (globalCounter == elemCount) break;
    }
    tr += "</tr>";
    table.innerHTML += (tr);
}