用JavaScript填充表格

Filling a table with JavaScript

本文关键字：表格 填充 JavaScript      更新时间：2023-09-26

我正试图动态创建一个表，并根据视口的宽度用具有特定单元格数的行来填充它。我还想确保当页面加载时，它会调整屏幕的宽度（所以不仅仅是常规屏幕大小）。

以下是我迄今为止所尝试的，此代码位于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

如果数据列表中的rowElems*rowCount项少于偶数倍，则会超出数据数组。

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

您应该只看到最后一个未能显示的表行。如果您的数据集中只有一行，那么您将在表中看不到任何内容，因为永远无法调用table.appendChild(tr)。

此外，Diodeus对dom操纵的评论也是不错的。

根据Diodeus和KyleFransham的提示，我一直在寻找防止最后一排崩溃的方法，导致我进入Object.keys(data).length;。

我创建了一个获取JSON对象长度的变量。然后，在for... in循环结束时，我只检查globalCounter是否等于对象的长度。如果是的话，我就跳出循环！

在自己测试性能后，我也更改为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);
}
相关文章：