Question

我是javascript新手，遇到了问题。我有发票行，可以通过按一个按钮来添加。现在我想分别计算每行的总金额（其公式为（数量*价格）。合并的所有行的总和应成为发票的总和。问题是当我输入价格和数量时在第一行中，它会计算总数，但是当我添加新行时，它不会在输入值后不为新添加的行计算总数。请在这方面为我提供帮助。

function myFunction() {
  var x = document.getElementById("price").value;
  var y = document.getElementById("quantity").value;
  if (x != "") {
    document.getElementById("total").value = x * y;
  }
}

function add_fields() {

  var tableid = document.getElementById('product_table');
  var row = document.createElement("tr");

  row.innerHTML =
    '<td><input type="text" name="price" id="price" oninput="myFunction()">  </td>' +
  '<td><input type="text" name="quantity" id="quantity" oninput = "myFunction()" > < /td>' +
  '<td><input type="text" name="total" id="total" readonly></td>';

  tableid.appendChild(row);
}

table,
tr,
td,
th {
  border: 1px black solid;
}

<table>
  <thead>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </thead>

  <tbody id="product_table">
    <tr>
      <td><input type="text" name="price" id="price" oninput="myFunction();"></td>
      <td><input type="text" name="quantity" id="quantity" oninput="myFunction();"></td>
      <td><input type="text" name="total" id="total" readonly></td>
    </tr>

  </tbody>
  <input type="button" name="submit" value="Add Row" onclick="add_fields();">

Answer 1

改为使用事件委托-向容器添加一个单个侦听器，侦听input事件。然后，从事件的target属性中，可以获取更改后的input元素。使用.closest到达父级<tr>，然后从其后代中转到关联的price，quantity和total {{1 }}，并适当分配值。

请注意，这使用Javascript添加了处理程序，而不是使用内联HTML属性添加了处理程序，这些属性通常被认为是相当差的做法，并且可能难以管理。此外，单个文档中的重复ID是无效的HTML -此处完全不需要ID，因为您想要的<input>总是在每个input中以可预测的顺序排列。因此，您可以从HTML和<tr>字符串中删除id和onclick属性：

row.innerHTML

const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
  const tr = target.closest('tr');
  const [price, quantity, total] = tr.querySelectorAll('input');
  total.value = price.value * quantity.value;
});
function add_fields() {
  var row = document.createElement("tr");
  row.innerHTML =
    '<td><input type="text" name="price">  </td > ' +
    '<td><input type="text" name="quantity"> </td>' +
    '<td><input type="text" name="total" readonly></td>';
  table.appendChild(row);
}

table,
tr,
td,
th {
  border: 1px black solid;
}

分别计算每个添加行的总数和Javascript中所有行的总数

1 个答案: