添加相同的产品ID但不增加其数量

When you add product with the same Product Id it must increase its quantity and not be able to add a new row. I've tried the comments. Please check it below the js script. But it is still not working.

添加具有相同产品ID的产品时，必须增加其数量，并且无法添加新行。我试过这些评论。请在js脚本下方查看。但它仍然无法正常工作。

let Cart = [];


function viewCart() {

  let tr = document.createElement('tr');
  for (cart of Cart) {
    tr.innerHTML = `<td>${ cart.id }</td>
                      <td>${ cart.desc }</td>
                      <td>${ cart.qty }</td>
                      <td>${ cart.price }</td>
                      <td>${ cart.qty * cart.price }</td>`;

  }
  cartsTable.appendChild(tr);
}

function AddtoCart(productid, description, quantity, price) {
  let inputs = {
    id: productid,
    desc: description,
    qty: quantity,
    price: price
  };
  Cart.push(inputs);
  viewCart()
}

<script src="script.js"></script>

<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 100000)" />
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 2, 20000)" />
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 40000)" />

<table border="1|1" id="cartsTable">
  <tr>
    <th>Product ID</th>
    <th>Product Description</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Total</th>
  </tr>
</table>

1 个解决方案

#1

I'd recommend you to use an object instead of an array to use the productid as key.

我建议您使用对象而不是数组来使用productid作为键。

const cart = {};

function AddtoCart(productid, description, quantity, price) {
  if (cart[productid]) {
    cart[productid].qty += quantity;
  } else {
    cart[productid] = {
      id: productid,
      desc: description,
      qty: quantity,
      price: price
    };
  }
  
  viewCart(cart);
}

function viewCart() {
  let tbody = document.getElementById('cartsBody');
  tbody.innerHTML = '';
  Object.values(cart).forEach(content => {
    tbody.innerHTML += `<td>${ content.id }</td>
                      <td>${ content.desc }</td>
                      <td>${ content.qty }</td>
                      <td>${ content.price }</td>
                      <td>${ content.qty * content.price }</td>`;

  });
}

<script src="script.js"></script>

<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 100000)" />
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 2, 20000)" />
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 40000)" />

<table border="1|1" id="cartsTable">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Description</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="cartsBody">
  </tbody>
</table>