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子项

回答

相关问题