getElementsByTagName（「td」）不會返回選定行的所有td子項

我已創建了顛倒表的行和列的javascript函數。下面是代碼：getElementsByTagName（「td」）不會返回選定行的所有td子項

function rotate(){ 
      var table = document.getElementById("table"); 
      var newtable = document.createElement("table"); 

      var tablebody = table.getElementsByTagName("tbody")[0]; 
      var newtablebody = document.createElement("tbody"); 
      newtable.appendChild(newtablebody); 

      var rows = tablebody.getElementsByTagName("tr"); 

      var heads = tablebody.getElementsByTagName("th"); 

      var i; 
      for(i = 0; i < rows.length; i++) 
      { 
       var cells = rows[i].getElementsByTagName("td"); 
       var j; 
       for(j = 0; j < heads.length; j++) 
       { 
        if(newtablebody.getElementsByTagName("tr")[j] == undefined) 
        { 
         var newrow = document.createElement("tr"); 
         newtablebody.appendChild(newrow); 
        } 
        if(cells[j] == undefined) 
        { 
         var newcell = document.createElement("td"); 
         newtablebody.getElementsByTagName("tr")[j].appendChild(newcell); 
        } 
        else 
        { 
         var newcell = cells[j]; 
         var nbspan = cells[j].getAttribute("colspan"); 
         newcell.setAttribute("rowspan", nbspan); 
         newcell.setAttribute("colspan", 1); 
         newtablebody.getElementsByTagName("tr")[j].appendChild(newcell); 
        } 
       } 
      } 
      table.innerHTML = newtable.innerHTML; 
     };

的問題是，當我試圖讓與標籤名「TD」所有的孩子當前行，我得到了很多不確定的細胞，而我可以從控制檯日誌中看到這些單元格存在幷包含數據（我在日誌中顯示innerHTML）。

我真的迷路了，所以任何幫助，將不勝感激。謝謝！

來源

2016-03-28 Griffin_0

你是否確定'table'，'tablebody'等等都是非空的？ – birdoftheday

如果你在這裏放一些HTML，測試你的腳本會容易得多。 – John

是的，我已經用console.log（table.innerHTML）等來檢查幾次，以確保。其實我知道他們是非空的，因爲一些孩子被檢索，但有些不是，這就是爲什麼我很困惑... –

當您將一個現有單元添加到新表格行時，您隱式地從舊錶格行中刪除它將刪除;一個單元格一次只能在DOM中的一個地方。由getElementsByTagName()返回的節點列表是live，這表示從錶行中刪除該單元格也立即將其從cells數組中移除。這意味着處於cells[j]的單元格突然消失，因此cells[j]將成爲（舊）表格行中的單元格。然而，你的循環仍然增加j，所以只要發生這種情況，你就跳過一個單元格。

一種簡單的方法來解決該問題是你開始循環之前的節點列表複製到一個數組：

var cells = rows[i].getElementsByTagName("td"); 
    cells = [].map.call(cells, Object);

現在你已經有了一個簡單的數組，元素不會神奇地消失從中。

來源

2016-03-28 14:27:07 Pointy

我不知道，非常感謝，這解決了我的問題！ –

getElementsByTagName（「td」）不會返回選定行的所有td子項

回答

相關問題