我想将产品添加到表中，但是当我添加新产品时，它的数量和小计会使用 Javascript 刷新（默认为 1）

Posted 2023-03-14

【中文标题】我想将产品添加到表中，但是当我添加新产品时，它的数量和小计会使用 Javascript 刷新（默认为 1）

【英文标题】：I want to add products to table but when i add new proudct its quantity and subtotal gets refreshed (by default 1 ) using Javascript

【发布时间】：2022-01-22 14:44:16

【问题描述】：

。如何在不刷新旧数据的情况下添加产品？我应该将产品数据存储到本地存储中吗？

下图是为了更好地理解我的问题...

let product_name = ''
let product_price = ''
let quantity = 1

const quantity_change = (x) => 
  x.parentElement.parentNode.children[3].children[0].value = x.value * product_price


const deleteRow = (row) => 
  row.parentElement.parentElement.remove()


const getProduct = (x) => 
  product_name = x.children[2].value
  product_price = x.children[2].value
  product_subtotal = parseInt(quantity) * parseInt(product_price);

  let tbody = document.getElementById("tbody").innerhtml += `
        <tr>
          <td>$product_name</td>
          <td><input type='number' onchange='quantity_change(this)' value='$quantity' class='form-control'</td>
          <td><input type='text' value='$product_price' class='form-control' readonly/></td>
          <td><input type='text' value='$product_price * quantity' class='form-control' readonly/></td>
          <td><button class='btn btn-danger' onclick="deleteRow(this)">x</button></td>
          </tr>
        `

<table class="table ">
  <tr>
    <th>Product Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Subtotal</th>
    <th>X</th>
  </tr>
  <tbody id="tbody">

  </tbody>
</table>

【问题讨论】：

与您的问题无关，只是一个注释。除了example.com example.com 是保留域，admin.com 归某人所有，切勿将任何其他“假”域用于电子邮件。这可能会在将来给您带来问题。

使用this 代替使用直接索引键。您必须为quantity_change 进行调试。因为根据代码，它似乎使所有产品的 price * 1（您定义默认数量）。

Michael Mono...你是对的...这仅用于测试目的。

【参考方案1】：

我使用以下代码解决了这个问题。我使用了内置的 JavaScript 表格函数。

const getProduct = (x) =>

    product_name = x.children[1].value
    product_price = x.children[2].value
    product_subtotal = parseInt(quantity) * parseInt(product_price);

    let tbody = document.getElementById("tbody");
    let row = tbody.insertRow(tbody)
    let cell1 = row.insertCell(0);
    let cell2 = row.insertCell(1);
    let cell3 = row.insertCell(2);
    let cell4 = row.insertCell(3);
    let cell5 = row.insertCell(4);

    cell1.innerHTML = `$product_name`
    cell2.innerHTML = `<input type='number' onclick='quantity_change(this)' value='$quantity' class='form-control'/>`
    cell3.innerHTML = `<input type='text' value='$product_price' class='form-control' readonly/>`
    cell4.innerHTML = `<input type='text' value='$product_price * quantity' class='form-control' readonly/>`
    cell5.innerHTML = `<button class='btn btn-danger' onclick="deleteRow(this)">x</button>`