Question

我有两个按钮，每个按钮都会向数组orderArray添加一个数组。这工作正常，数组显示为html表。输出表格时，还会创建一个按钮。此按钮的目的是删除与其关联的数组，从而从表中删除一行。

这样可以正常工作，但是在使用.splice删除部分数组之后，无法再向数组中添加更多内容，它只会抛出“无法读取属性长度”。

您可以在控制台中看到阵列已拼接且长度值正确但错误仍然存在。我显然没有在这里得到一些东西，因为我认为当循环调用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它是一个小提琴。

Answer 1

这是因为您在添加新项目时增加orderNumber但是当您删除项目时忘记减少orderNumber，因此您收到错误，因为数组中不存在索引： -

function removeLine(arrayIndex){
orderArray.splice(arrayIndex, 1);
console.log(orderArray);
 orderNumber--; //add this line
$("#ordered").html(makeTable(orderArray));
}

Demo

Answer 2

尝试用orderArray.push(theOrder);代替orderArray[orderNumber] = theOrder;

function orderUpdate(item,price){
    theOrder = [item, price];
    orderArray.push(theOrder);
    // orderNumber++;
}

jsfiddle https://jsfiddle.net/purnrntr/2/

Javascript函数添加到或拼接数组

2 个答案: