无法在 'Node' 上执行 'insertBefore':参数 1 不是 'Node' 类型

Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'

如何解决此错误?我做错了什么可能导致了这个?

在 Chrome 控制台中,我得到无法在 'Node' 上执行 'insertBefore':参数 1 不是 'Node' 类型。对于这行代码

rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

可以在最后找到。我不知道如何修复此错误或此错误是什么。

console.log("CONNECTED");
var n = 1;
tester(n);

function tester(n){
var switchcount = 0;
var  table = document.getElementById("myTable2");
var monthsArray= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];//0-11    

var switching = true;
// Set the sorting direction to ascending:
var dir = "asc";
// Check the status of each data cell in a table. 
while(switching){
    switching = false;
    var rows = table.rows;      
    var shouldSwitch;

    for (var i = 1; i < (rows.length-1); i++) { 
        var cellsX = rows[i].getElementsByTagName("TD")[n];
        var cellsY = rows[i + 1].getElementsByTagName("TD")[n];
        var dateX = cellsX.textContent.split(" ");
        var dateY = cellsY.textContent.split(" ");
        var mnthX = dateX[0];
        var mnthY = dateY[0];
        var yearX = dateX[1];
        var yearY = dateY[1];
        var totalX = parseInt(monthsArray.indexOf(mnthX)) + parseInt(yearX);
        var totalY = parseInt(monthsArray.indexOf(mnthY)) + parseInt(yearY);

        if(dir === "asc"){
            if(totalX < totalY) {
                //if so, mark as a switch and break the loop:
                shouldSwitch = true;
                break;
            }
        }else if(dir === "desc"){
            if(totalX > totalY){
                shouldSwitch = true;
                break;
            }
        }
    }
    if(shouldSwitch){
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount++;
    }else{
        if (switchcount === 0 && dir === "asc") {
            dir = "desc";
            switching = true;
        }

    }
}

}

我的 table 我正在按月和年排序。

<table id ="myTable2">
    <thead>
        <tr>
            <th>Client</th>
            <th>Due Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Smith</td>
            <td>Apr 18</td>
        </tr>
        <tr>
            <td>Kelly</td>
            <td>Jan 18</td>
        </tr>
        <tr>
            <td>Park</td>
            <td>Nov 18</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>July 19</td>
        </tr>
    </tbody>
</table>

编辑后的答案:

当你 i 是行的最后一个元素的索引时,没有 rows[i+1]。您的问题是,在代码的上述部分中,iifor 循环之后的值,这是循环测试的第一个值 i < (rows.length-1) 失败的。因此,在代码的这一点上,你应该总是有i === (rows.length-1),这不是你想要的

避免在循环外使用循环变量的问题(这很少是目标,而且总是很难 read/understand/debug 等)的一种方法是使用 let 而不是编写循环var,如果您不介意不支持旧版浏览器:

for (let i = 1; i < (rows.length-1); i++) {

这样,i 就不会在循环之外定义,如果您碰巧尝试使用 i 在没有任何意义的地方进一步向下你的代码。


但是代码中还有其他错误。特别是,您永远不会真正脱离 while 循环。希望您现在可以自己解决这个问题,因为您知道如何修复您遇到的错误。但是,如果我必须使用纯 JavaScript 对 table 进行排序,我可能会:

  • 获取我的 table、
  • 中所有行的列表
  • 使用 the build-in sort function 和精心选择的比较函数对这些进行排序,
  • 使用 remove
  • 从 DOM 中删除所有行
  • 在排序数组的 for 循环中使用 appendChild 以正确的顺序添加它们。

这样会更容易阅读和调试。编写自己的排序函数是一个很好的练习,但如果您的目标是 Web 功能而不是练习算法,请不要这样做。