<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<!-- ** JavaScript ** -->
<script src="products.js" charset="utf-8"></script>
<script src="purchased.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
clear_table = function( ) {
var table = document.getElementById( "cart_table" );
while(table.hasChildNodes( )) {
table.removeChild( table.firstChild );
}
}
make_table = function( items ) {
// ** Load items into table and calc total **
var total = 0;
var table = document.getElementById("cart_table");
for(var x = 0; x < items.length; x++){
var tr = table.insertRow( x + 1 );
var item = tr.insertCell( 0 );
var price = tr.insertCell( 1 );
item.innerHTML = items[x].name;
price.innerHTML = "$" + items[x].price;
//remove button
var remove_btn = document.createElement( "button" );
remove_btn.className = "btn_remove";
remove_btn.href = "#";
remove_btn.index = x;
var btn_text = document.createTextNode( "x" );
remove_btn.appendChild( btn_text );
var remove = tr.insertCell( 2 );
remove.appendChild( remove_btn );
remove_btn.onclick = function() {
items.delete(this.index);
var ids = new Array();
for( var x = 0; x < items.length; x++ ){
ids.push( items[x].id );
}
save_purchased( ids );
clear_table( );
make_table( items );
return false;
}
//total
total += ( items[x].price );
}//end build table loop
//insert total
var tr = table.insertRow(x+1);
var item = tr.insertCell( 0 );
var price = tr.insertCell( 1 );
item.innerHTML = "Total: ";
price.innerHTML = "$" + total;
}
window.onload = function() {
// ** Get orders id form cookie **
var order = load_purchased();
// ** Load orders products from cookie id into items[] **
var items = new Array();
for( var x = 0; x < order.length; x++ ){
items.push( get_product( order[x] ) );
//alert( items[x].name );
}
make_table( items );
}//end window.onload()
</script>
</head>
<body>
<heading>
<h1>Cart</h1>
<a href="home.html"><button class="btn_cart">← Home</button></a>
</heading>
<div id="content">
<table id="cart_table">
<tr>
<th>Item</th>
<th>Price</th>
<th>Remove</th>
</tr>
</table>
<a href="checkout.html"><button class="btn_cart">Order →</button></a>
</div>
</body>
是什么导致此错误？ （
IndexSizeError：索引或大小为负数或大于允许的数量）从
make_table()事件执行remove_link.onclick时发生错误。此
make_table()函数首先从window.onload()执行，并创建我的表。它执行正常，没有错误。但是，当我单击项目旁边的“删除”按钮以将其从表中删除时。
remove_link.onclick()执行，再次执行make_table()函数以重新创建不包含不需要项的表并计算新的总数。嗯...该函数在第二次执行时不起作用，并且出现此错误（
IndexSizeError：索引或大小为负数或大于允许的数量）控制台在第27行说，这是此行（
var tr = table.insertRow( x + 1 );）。但是，我可以刷新页面，并且该页面将再次正常加载，而删除的项目消失了。因此，仅当
make_table()函数被称为onclick事件形式时才会发生。 最佳答案
当make_table()函数从remove_btn.onclick()第二次执行以重新制作表时出现错误，它显示时没有删除项目。
第一次执行make_table()时，数学运算就很好了，因为我依赖于for循环中x的值。 （您可以在下面看到这些行）
var tr = table.insertRow( x + 1 );
var item = tr.insertCell( 0 );
var price = tr.insertCell( 1 );
从
make_table()执行的第二次remove_btn.onclick()，我相信x的值已关闭，导致IndexSizeError。我将类似@Bindrid的值更改为：
var tr = table.insertRow( -1 );
var item = tr.insertCell( -1 );
var price = tr.insertCell( -1 );
...而我的IndexSizeError消失了。
我还必须从表中删除硬编码的HTML
<th>，并让我的make_table()动态插入我的<th>标题语句，我的clear_table()也会清除<th>标题以及我的表，而我的JS却没有动态地重新创建<th>感谢您的帮助，@Bindrid和@Santi ！！！
关于javascript - 当我尝试在页面上创建表时出现此错误-IndexSizeError:索引或大小为负数或大于允许的数量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40940293/