getElementsByTagName(“td”）没有't返回选定行的所有td子级

getElementsByTagName("td") doesn't return all td children for a selected row

本文关键字：td 返回 子级 没有 getElementsByTagName      更新时间：2023-09-26

我创建了一个javascript函数，用于反转表的行和列。这是代码：

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）。

我真的很失落，所以任何帮助都将不胜感激。谢谢

当您将现有单元格附加到新表行时，您会隐式地将其从旧表行中删除；一个单元格一次只能位于DOM中的一个位置。getElementsByTagName()返回的节点列表为live，这意味着从表行中删除该单元格也会立即将其从cells数组中删除。这意味着位于cells[j]的单元格突然消失，cells[j]因此成为（旧）表行中的下一个单元格。然而，您的循环仍然以j为增量，因此无论何时发生这种情况，都可以跳过一个单元格。

克服这个问题的一个简单方法是在开始循环之前将节点列表复制到数组中：

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

现在你有了一个普通的数组，元素不会神奇地从中消失。

相关文章：