js删除table某tr中遇到的坑

在某次执行动态加载数据到某table中时，由于想保留第一行的信息栏，像这样

描述	当前记录	更新时间
商品1	13	2021-6-12 16:51:22
商品2	14	2021-6-12 16:51:26

正常操作是根据id找到tab，然后可以根据下标找到tr，然后执行remove即可

代码如下：

let tabNode = document.getElementById("tab1");
// 若有第二行数据，则删除2行之后数据
var trNodes =  tabNode.getElementsByTagName("tr");

console.log("length:"+trNodes.length);
if(trNodes.length>1){
    for (let i = 1; i < trNodes.length; i++) {
        console.log(" do remove "+i);
        trNodes[i].remove();
    }
}

然后出现了删不干净的情况。

debugger半天，才发现，由于对tr数组直接进行的操作，比如原本trNodes[]长度为3，第一次删去trNodes[1]后，第二次循环中，i=2，trNodes.length=2，循环条件已经达不到了，故商品2删不掉。

接着，我声明length变量来做循环，代码如下

let tabNode = document.getElementById("tab-recovery");
// 若有第二行数据，则删除2行之后数据
var trNodes =  tabNode.getElementsByTagName("tr");
// 声明变量
var length = trNodes.length;
if(trNodes.length>1){
    for (let i = 1; i < length; i++) {
        console.log(" do remove "+i);
        trNodes[i].remove();
    }
}

然后，还是失败了，原因是for循环条件达到了，但这依然出错了

第二次循环时，trNodes[2]会出现数组越界问题。

因此，最终我把代码又改了一下，固定取第2个元素进行删除即可

let tabNode = document.getElementById("tab-recovery");
// 若有第二行数据，则删除2行之后数据
var length = tabNode.getElementsByTagName("tr").length;
if (length > 1) {
    for (let i = 1; i < length; i++) {
        tabNode.deleteRow(1);
    }
}

使用这个办法，删除终于正常了。

这种问题其实不限于JS操作，后端任何语言，执行数组操作时，都会遇到类似的坑，需要注意一下。