无法在 '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]
。您的问题是,在代码的上述部分中,i
是 i
在 for
循环之后的值,这是循环测试的第一个值 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 功能而不是练习算法,请不要这样做。
如何解决此错误?我做错了什么可能导致了这个?
在 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]
。您的问题是,在代码的上述部分中,i
是 i
在 for
循环之后的值,这是循环测试的第一个值 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 功能而不是练习算法,请不要这样做。