Question

当您添加具有相同产品ID的产品时，它必须增加其数量并且无法添加新行。我已经尝试了这些评论。请在js脚本下面查看。但它仍然没有用。

＆＃13;

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()
}

＆＃13;

<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>

＆＃13;

Answer 1

我建议您使用object代替array来使用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>

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

1 个答案: