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>

了解它是如何正确拆分的： enter image description here

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

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

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

1 个答案: