我有两个按钮，每个按钮向数组 orderArray 添加一个数组。这工作正常，数组显示为 html 表。输出表格时，还会创建一个按钮。此按钮的目的是删除与其关联的数组，从而从表中删除一行。
这工作正常，但在使用 .splice 删除数组的一部分后，不可能再向数组添加更多内容，它只会抛出“无法读取属性长度”。
在console中可以看到数组拼接好了，长度值是正确的，但是还是报错。我显然在这里没有得到任何东西，因为我认为当循环调用 myArray.length 时它每次都会得到正确的长度。
这是js:
var orderArray = [];
var orderNumber = 0;
var theOrder = [];
var total = 0;
function orderUpdate(item,price){
theOrder = [item, price];
orderArray[orderNumber] = theOrder;
orderNumber++;
}
function makeTable(myArray) {
var result = "<table border=2 id=orderTable>";
console.log(myArray.length);
for(var i = 0; i < myArray.length; i++) {
result += "<tr id='row" + i + "'>";
for(var j = 0; j < myArray[i].length; j++){
result += "<td>" + myArray[i][j] + "</td>";
}
result += "<td><button onclick='removeLine(" + i + ")'>Remove</button></td></tr>";
}
result += "</table>";
console.log(myArray);
return result;
}
$( "#LongB" ).click(function() {
orderUpdate("Long Black", 2.50);
$("#ordered").html(makeTable(orderArray));
});
$( "#FlatW" ).click(function() {
orderUpdate("Flat White", 3.50);
$("#ordered").html(makeTable(orderArray));
});
function removeLine(arrayIndex){
orderArray.splice(arrayIndex, 1);
console.log(orderArray);
$("#ordered").html(makeTable(orderArray));
}
和 html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSPOS</title>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<button id="LongB">Long Black</button>
<button id="FlatW">Flat White</button>
<h3>Ordered:</h3>
<div id="ordered"></div>
<script src="js/stuff.js"></script>
</body>
</html>
和here它就像一把 fiddle 。
最佳答案
这是因为您在添加新项目时增加了 orderNumber，但是当您删除项目时忘记减少 orderNumber，所以您得到了错误，因为索引没有' 存在于数组中:-
function removeLine(arrayIndex){
orderArray.splice(arrayIndex, 1);
console.log(orderArray);
orderNumber--; //add this line
$("#ordered").html(makeTable(orderArray));
}
关于添加或拼接数组的Javascript函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32919050/