Javascript IE insertBefore bug导致删除tr元素单元格

Javascript IE insertBefore bug导致删除tr元素单元格,javascript,html,css,internet-explorer,Javascript,Html,Css,Internet Explorer,我遇到了一个只有在最新的IE 11版本(11.0.9600.1828CO)中才能复制的问题,我想知道我是否做错了什么,或者这是一个针对浏览器的bug 我试图实现的是通过在HTML元素上使用纯JavaScript交换现有td/th元素,从而重新排列它们各自行中的现有td/th元素。问题似乎是,当我将第一行绝对定位以获得固定的标题行时,tr元素的cells属性没有正确更新 <tr id="headerRow" style="position: absolute; top: 0px;">&

我遇到了一个只有在最新的IE 11版本(11.0.9600.1828CO)中才能复制的问题,我想知道我是否做错了什么,或者这是一个针对浏览器的bug

我试图实现的是通过在HTML元素上使用纯JavaScript交换现有td/th元素,从而重新排列它们各自行中的现有td/th元素。问题似乎是,当我将第一行绝对定位以获得固定的标题行时,tr元素的cells属性没有正确更新

<tr id="headerRow" style="position: absolute; top: 0px;"><th>Column 0</th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th></tr>  
第0列第1列第2列第3列第4列第5列
算法很简单:

源元素:交换的最大行索引(例4)

目标元素:交换的两个元素中最小的行索引(例3)

1) 记录下一个具有最大行索引的同级元素(称为sourceElement),以供以后参考(如果它存在,则可能不在行的末尾)

2) 如果目标元素有同级元素,请使用insertBefore将源元素放在它前面,否则将为行追加子元素,因为目标元素必须是最后一个单元格

3) 然后,如果在第一步中找到了同级元素,则使用insertBefore将目标元素放在它前面,否则出于相同的原因将其追加到子元素

4) 对表中的每一行重复此操作

以下是JS小提琴:

window.clickFunction=函数(currentIndex,newIndex){
swapColumns(currentIndex,5);
swapColumns(newIndex,5);
swapColumns(currentIndex,5);
};
window.swapColumns=函数(currentIndex,newIndex){
//交换以使最大的索引始终插入到另一个索引之前
如果(当前索引<新索引)
{
var tempIndex=新指数;
newIndex=当前索引;
currentIndex=tempIndex;
}
$(“#beforeCells”).html(“交换前:每个单元应具有6个单元计数”);
$(“#afterCells”).html(“交换后:每个单元应具有6个单元计数”);
if(newIndex!=-1&¤tIndex!=-1&¤tIndex!==newIndex){
//遍历每一行,交换元素
变量行=$(“#myTable>tbody>tr”);
var numRows=rows.length;
var tbody=document.getElementById(“myBody”);
//计算索引是否在列组的中间
var tr、sourceElement、targetElement;
对于(var rowIndex=0;rowIndex“+tr.cells.length);
}
if(typeof sourceElement!=“未定义”&&typeof targetElement!=“未定义”){
//在目标元素中保留对swap的引用
var sourceSibling=sourceElement.nextSibling;
if(targetElement.nextSibling){
tr.insertBefore(sourceElement,targetElement);
}否则{
tr.appendChild(sourceElement);
}
if(源同级){
//将列置于目标之前,向左移动列
tr.insertBefore(targetElement,sourceSibling);
}否则{
tr.appendChild(targetElement);
}
}
//仅打印标题和第一行(毕竟与第一行相同)
如果(rowIndex==0 | | rowIndex==1){
$(“#afterCells”).html($(“#afterCells”).html()+”
“+tr.cells.length); } } } };

柱0柱1柱2柱3柱4柱5
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
012345
单击我(单元格已损坏)!
单击我了解解决方法(先刷新)!
交换前:每个单元应有6个单元计数
交换后:每个单元应有6个单元计数

表格非常易变。将行设置为
位置:absolute
几乎必然会导致一些奇怪的情况……表非常易变。将一行设置为
位置:absolute
几乎必然会引起一些奇怪的事情。。。