javascript - 替换第一行中的值

我的添加到购物车功能确实需要帮助。问题是，当我第二次在购物车中添加产品时，它将替换第一次中的值。它应该显示在另一行中。请帮我。谢谢。

    var qtyTotal = 0;
    var priceTotal = 0;
    var products = [];


    function addProduct() {
        var productID = document.getElementById("productID").value;
        var product_desc = document.getElementById("product_desc").value;
        var qty = document.getElementById("quantity").value;
        // qtyTotal = qtyTotal + parseInt(qty);
        //document.getElementById("qtyTotals").innerHTML=qtyTotal;
        var price = document.getElementById("price").value;

      var newProduct = {

          product_id : null,
          product_desc : null,
          product_qty : 0,
          product_price : 0.00,
      };
        newProduct.product_id = productID;
        newProduct.product_desc = product_desc;
        newProduct.product_qty = qty;
        newProduct.product_price = price;


        products.push(newProduct);

        //console.log("New Product " + JSON.stringify(newProduct))
        //console.log("Products " + JSON.stringify(products))

        var html = "<table border='1|1' >";
        html+="<td>Product ID</td>";
        html+="<td>Product Description</td>";
        html+="<td>Quantity</td>";
        html+="<td>Price</td>";
        html+="<td>Action</td>";
        for (var i = 0; i < products.length; i++) {
        html+="<tr>";
        html+="<td>"+products[i].product_id+"</td>";
        html+="<td>"+products[i].product_desc+"</td>";
        html+="<td>"+products[i].product_qty+"</td>";
        html+="<td>"+products[i].product_price+"</td>";
        html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\""+products[i].product_id +"\", this);'/>Add to Cart</button></td>";
        html+="</tr>";
    }
        html+="</table>";
        document.getElementById("demo").innerHTML = html;

        document.getElementById("resetbtn").click()
}
    function deleteProduct(product_id, e) {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
        for(var i = 0; i < products.length; i++) {
            if (products[i].product_id == product_id) {
                // DO NOT CHANGE THE 1 HERE
               products.splice(i, 1);
            }
        }
    }

    function addCart(product_id){
        var html = "<table border='1|1'>";
        html+="<td>Product ID</td>";
        html+="<td>Product Description</td>";
        html+="<td>Quantity</td>";
        html+="<td>Price</td>";
        html+="<td>Total</td>";
        html+="<td>Action</td>";
        for (var i = 0; i < products.length; i++) {
            if (products[i].product_id == product_id) {
            products[i].product_qty = parseInt(products[i].product_qty) + 1;
            html+="<tr>";
            html+="<td>"+products[i].product_id+"</td>";
            html+="<td>"+products[i].product_desc+"</td>";
            html+="<td>"+products[i].product_qty+"</td>";
            html+="<td>"+products[i].product_price+"</td>";
            html+="<td>"+parseInt(products[i].product_price)*parseInt(products[i].product_qty)+"</td>";
            html+="<td><button type='submit' onClick='subtractQuantity(\""+products[i].product_id +"\", this);'/>Subtract Quantity</button></td>";
            html+="</tr>";
        }
    }
            html+="</table>";
            document.getElementById("demo2").innerHTML = html;

    }
    function subtractQuantity(product_id)
    { alert(product_id);
    for(var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id & products[i].product_qty >= 1) {
            products[i].product_qty = parseInt(products[i].product_qty) - 1;
        }

        if (products[i].product_id == 0) {
            removeItem(products[i].product_id);
        }
        console.log("Products " + JSON.stringify(products));

    }
}

function removeItem(product_id) {
    for(var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            // DO NOT CHANGE THE 1 HERE
            products.splice(i, 1);
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
    <table>
        <tr>
            <td>
                <label for="productID">Product ID:</label>
            </td>
            <td>
                <input id="productID" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="product">Product Desc:</label>
            </td>
            <td>
                <input id="product_desc" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="quantity">Quantity:</label>
            </td>
            <td>
                <input id="quantity" name="quantity" width="196px" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="price">Price:</label>
            </td>
            <td>
                <input id="price" name="price" size="28" required/>
            </td>
        </tr>
    </table>
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >


</form>
<br>
<p id="demo"></p> <br/>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
</body>
</html>

最佳答案

检查以下代码。我已经用JavaScript进行了更改。

var qtyTotal = 0;
    var priceTotal = 0;
    var products = [];


    function addProduct() {
        var productID = document.getElementById("productID").value;
        var product_desc = document.getElementById("product_desc").value;
        var qty = document.getElementById("quantity").value;
        // qtyTotal = qtyTotal + parseInt(qty);
        //document.getElementById("qtyTotals").innerHTML=qtyTotal;
        var price = document.getElementById("price").value;

      var newProduct = {

          product_id : null,
          product_desc : null,
          product_qty : 0,
          product_price : 0.00,
      };
        newProduct.product_id = productID;
        newProduct.product_desc = product_desc;
        newProduct.product_qty = qty;
        newProduct.product_price = price;


        products.push(newProduct);

        //console.log("New Product " + JSON.stringify(newProduct))
        //console.log("Products " + JSON.stringify(products))

        var html = "<table border='1|1' >";
        html+="<td>Product ID</td>";
        html+="<td>Product Description</td>";
        html+="<td>Quantity</td>";
        html+="<td>Price</td>";
        html+="<td>Action</td>";
        for (var i = 0; i < products.length; i++) {
        html+="<tr>";
        html+="<td>"+products[i].product_id+"</td>";
        html+="<td>"+products[i].product_desc+"</td>";
        html+="<td>"+products[i].product_qty+"</td>";
        html+="<td>"+products[i].product_price+"</td>";
        html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\""+products[i].product_id +"\", this);'/>Add to Cart</button></td>";
        html+="</tr>";
    }
        html+="</table>";
        document.getElementById("demo").innerHTML = html;

        document.getElementById("resetbtn").click()
}
    function deleteProduct(product_id, e) {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
        for(var i = 0; i < products.length; i++) {
            if (products[i].product_id == product_id) {
                // DO NOT CHANGE THE 1 HERE
               products.splice(i, 1);
            }
        }
    }

    function addCart(product_id){
      var html = '';
      var ele = document.getElementById("demo2");
      if(ele.innerHTML == '')
      {
        html+="<table id='tblCart' border='1|1'>";
        html+="<tr><td>Product ID</td>";
        html+="<td>Product Description</td>";
        html+="<td>Quantity</td>";
        html+="<td>Price</td>";
        html+="<td>Total</td>";
        html+="<td>Action</td></tr>";
      }
        for (var i = 0; i < products.length; i++) {
            if (products[i].product_id == product_id) {
            products[i].product_qty = parseInt(products[i].product_qty) + 1;
            html+="<tr>";
            html+="<td>"+products[i].product_id+"</td>";
            html+="<td>"+products[i].product_desc+"</td>";
            html+="<td>"+products[i].product_qty+"</td>";
            html+="<td>"+products[i].product_price+"</td>";
            html+="<td>"+parseInt(products[i].product_price)*parseInt(products[i].product_qty)+"</td>";
            html+="<td><button type='submit' onClick='subtractQuantity(\""+products[i].product_id +"\", this);'/>Subtract Quantity</button></td>";
            html+="</tr>";
        }
    }

      if(ele.innerHTML == '')
      {
        html+= "</table>";
        ele.innerHTML = html;
      }
      else
      {
        document.getElementById("tblCart").innerHTML += html;
      }
    }

    function subtractQuantity(product_id)
    { alert(product_id);
    for(var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id & products[i].product_qty >= 1) {
            products[i].product_qty = parseInt(products[i].product_qty) - 1;
        }

        if (products[i].product_id == 0) {
            removeItem(products[i].product_id);
        }
        console.log("Products " + JSON.stringify(products));

    }
}

function removeItem(product_id) {
    for(var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            // DO NOT CHANGE THE 1 HERE
            products.splice(i, 1);
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
    <table>
        <tr>
            <td>
                <label for="productID">Product ID:</label>
            </td>
            <td>
                <input id="productID" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="product">Product Desc:</label>
            </td>
            <td>
                <input id="product_desc" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="quantity">Quantity:</label>
            </td>
            <td>
                <input id="quantity" name="quantity" width="196px" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="price">Price:</label>
            </td>
            <td>
                <input id="price" name="price" size="28" required/>
            </td>
        </tr>
    </table>
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >


</form>
<br>
<p id="demo"></p> <br/>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
</body>
</html>