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的索引，該索引是表中圖像的實際數量。你可以使用一個單獨的計數多少圖像是在你intialize表：

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