Javascript - 如果表格中一行填充了 4 个单元格，则自动切换/创建另一行

Question

我认为标题是不言自明的。我正在使用 XMLHttpRequest 检索数据，并且数据被附加到表的列中。我决定只允许一行中只有 4 列，如果存在另一个元素，则应将其附加到另一行中。这就是我所做的:

//...
//unneccessary
//...
            var album_photos = JSON.parse(xhr2.responseText);
            for(var i = 0; i < album_photos.length; i++) {
                if(!isInArray(album_photos[i].Image_ID, image_ids)) {
                    var tr = document.getElementById("tiare");
                    if(i % 4 == 0) {
                        tr = document.createElement("tr");
                        document.getElementById("images").appendChild(tr);

                    }
//...
//creating elements to be append
//...
                    tr.appendChild(td);
                    td.appendChild(imagewrap);
                    imagewrap.appendChild(imagemenu);
                    imagemenu.appendChild(imagemenuimg1);
                    imagemenu.appendChild(imagemenuimg2);
                    imagewrap.appendChild(imagewrapimg);
                    image_ids.push(album_photos[i].Image_ID);
//...![enter image description here][1]
//unneccessary
//...

这是标记:

<table width="80%" id="images">
    <tr id="tiare">

    </tr>
</table>

看看它是如何没有被正确分割的:

我怎么能做到这一点，我的逻辑根本不起作用!我该怎么办？

P.S:不允许使用 jQuery 解决方案。 :)

如有任何帮助，我们将不胜感激。提前致谢。 :)

更新:我将我的代码更改为:

function getAlbumImages() {
    var xhr2 = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr2.open('GET', 'admin/images_data.php');

    xhr2.onreadystatechange = function(e) {
        if(xhr2.readyState == 4 && xhr2.status == 200) {
            var oldtable = document.getElementById("images");
            var newtable = oldtable.cloneNode();
            var tr = document.createElement("tr");

            var album_photos = JSON.parse(xhr2.responseText);
            for(var i = 0; i < album_photos.length; i++) {
                if(!isInArray(album_photos[i].Image_ID, image_ids)) {
                    if(i%4 == 0 && i != 0){
                        newtable.appendChild(tr);
                        tr = document.createElement('tr');        
                    }
                    var td = document.createElement('td');
                    var imagewrap = document.createElement('div');
                    imagewrap.className = "image-wrap";
                        var imagemenu = document.createElement('div');
                        imagemenu.className = "image-menu";
                            var imagemenuimg1 = document.createElement('img');
                            imagemenuimg1.src = "img/edit_img.png";
                            var imagemenuimg2 = document.createElement('img');
                            imagemenuimg2.src = "img/close.png";
                        var imagewrapimg = document.createElement('img');
                        imagewrapimg.className = "thumbnail";
                        imagewrapimg.src = "admin/album_photos/" + album_photos[i].Image_Path;
                        imagewrapimg.onclick = function() { showBigImage(this); };
                    tr.appendChild(td);
                    td.appendChild(imagewrap);
                    imagewrap.appendChild(imagemenu);
                    imagemenu.appendChild(imagemenuimg1);
                    imagemenu.appendChild(imagemenuimg2);
                    imagewrap.appendChild(imagewrapimg);
                    image_ids.push(album_photos[i].Image_ID);
                } else {
                    continue;
                }
            }
            newtable.appendChild(tr);
            oldtable.parentNode.replaceChild(newtable, oldtable);
        }
    }
    xhr2.send(null);
}

此函数在 setInterval 内调用，间隔为 5000 毫秒。

现在出现的问题是5秒后消失。我该如何解决？

Answer 1

我看到的第一个问题是 i 和 i % 4 不是您表格中的图像，而是返回数据中的图像。一旦您遇到数组中已有的图像，两者就会有所不同。您需要为 i % 4 使用索引，它是表中图像的实际数量。您可以单独计算您初始化的表中有多少图像:

var imageCnt = document.getElementById("images").getElementsByTagName("td").length

并且，每次您将图像添加到表中然后检查 %imageCnt % 4 以决定何时添加新行时的增量。

然后，您不想将图像添加到表中的最后一行，而不是表中的第一行，因为那是额外插槽所在的位置，也是新空行所在的位置。当您刚刚创建一个新行时，您将向最后一行添加图像，但当您开始时最后一行被部分填充时则不会。在这种情况下，您将向第一行添加图像。你可以从最后一行开始

var table = document.getElementById("images");
var lastRow = table.rows[table.rows.length - 1];

---

将这些应用于您的第一个代码示例将像这样工作:

//...
//unneccessary
//...
            var album_photos = JSON.parse(xhr2.responseText);
            var table = document.getElementById("images");
            var tableBody = table.getElementsByTagName("tbody")[0];
            var lastRow = table.rows[table.rows.length - 1];
            // initialize cell count
            var cellCount = table.getElementsByTagName("td").length;
            for(var i = 0; i < album_photos.length; i++) {
                if(!isInArray(album_photos[i].Image_ID, image_ids)) {
                    if (cellCount % 4 == 0 && cellCount !== 0) {
                        // make new row and append it to the table body
                        lastRow = document.createElement("tr");
                        tableBody.appendChild(lastRow);
                    }
//...
//creating elements to be append
//...
                    td.appendChild(imagewrap);
                    imagewrap.appendChild(imagemenu);
                    imagemenu.appendChild(imagemenuimg1);
                    imagemenu.appendChild(imagemenuimg2);
                    imagewrap.appendChild(imagewrapimg);
                    // best to append the new cell when it's fully formed
                    lastRow.appendChild(td);
                    ++cellCount;
                    image_ids.push(album_photos[i].Image_ID);
//...![enter image description here][1]
//unneccessary