我认为标题是不言自明的。我正在使用 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秒后消失。我该如何解决?
最佳答案
我看到的第一个问题是 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 个单元格,则自动切换/创建另一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22732743/