未捕获的 IndexSizeError：无法在“HTMLTableRowElement”上执行“insertCell”：提供的值 (1) 超出范围 [-1, 0]

Question

为什么图片没有出现在我的页面上？未捕获的 IndexSizeError：无法在“HTMLTableRowElement”上执行“insertCell”：提供的值 (1) 超出范围 [-1, 0] - 此错误调用此字符串。

[JS]var cell = row.insertCell(i);[/JS]




function createPreview() {
var f = document.createElement("table");
var row = f.insertRow();
var cell = row.insertCell(i);

for(var j = 0; j < count ; j++) {
var img = new Image();
img.src = "image/" + j + ".jpg";
img.id = "i" + j;
cell.appendChild(img);
}

document.body.appendChild(f);

}
</script>[/JS]

Answer 1

这是旧的，但是对于任何到达这里并遇到相同问题的人，您必须连续放置的第一个单元格是单元格 0，然后，您可以放置​​单元格 1，例如： 你不能把单元格 0 放在单元格 2 之后，因为你需要一个单元格 1。

方法是插入单元格0,1,2,3...

Answer 2

只是为了添加到 Gaunts 的答案中，因为我也想到了这个。

我正在创建一个新的 tbody，在这个 tbody 中，我通过遍历一个数组来动态创建新行。

最初，我使用典型的 for 循环进行代码循环，效果很好。

var tableBody = tableBody || document.createElement('tbody')

for (var i = 0, rowCtr = rowOrder.length; i < rowCtr; i++) {
    var newRow = tableBody.insertRow(i);
}

但后来我继续进行重构，使用反向 for 循环来减少 for 语句的冗长，并在不增加可读性和未来维护成本的情况下获得性能优势。

var tableBody = tableBody || document.createElement('tbody')

for (var i = rowOrder.length; i--;) {
    var newRow = tableBody.insertRow(i);
}

两个 for 循环都有相同的预期结果，相反的 for 循环更具可读性。因此，如果rowOrder 是一个包含 4 个元素的数组，则使用反向 for 循环将产生：

start loop
i = 3
i = 2
i = 1
i = 0
end loop

在此循环中，第一次运行将尝试var newRow = tableBody.insertRow(3)，因此您将收到索引错误，因为之前尚未创建位置 0、1、2 处的行。

这发生在我的 Google Chrome 46.0.2490.80 m 上 - 不知道为什么他们认为在 tbody 中创建稀疏行数组时会抛出异常，他们可以重构代码以允许稀疏数组，然后在更新之前DOM，只需重新排序索引键。即使这样也没有必要，只需将行推出即可。