Question

我有一个表格，每行的末尾都有一个输入。

以下是输入内容：

<td><input data-price='<?= floatval($row['Prix']); ?>' ?>' type="number" name="quantity" id="quantity"></td>

我有一个脚本，该脚本将输入中数据价格的价格乘以它与输入中的数字。现在，我的脚本首先将所有价格相加，然后将总数乘以表中的第一个输入。

如何更改代码，以便将每个价格乘以输入中的数量？

这是脚本：

    document.getElementById("submit").onclick = function giveTotal() {
        var total = 0;
        var grandTotal = document.getElementById('grandTotal');
        var quantity = document.getElementById('quantity');
        var nodes = document.getElementsByName('quantity');
        [].forEach.call(nodes, function(node) {
          console.log(quantity.value);
          console.log(node.dataset.price);
          total += (parseFloat(node.dataset.price) * quantity.value)
        })
        grandTotal.innerHTML = total;
        console.log('Total: ' + total);
      };

Answer 1

ID是唯一的-没有两个元素可以具有相同的ID。当您使用document.getElementById()时，它将仅返回与该ID匹配的第一个元素，而不会返回其他任何元素。

您已经可以访问nodes变量中的每个输入，并且已经在forEach循环中对其进行了迭代。因此，与其乘以quantity.value，不如乘以node.value，以便使用每个特定输入的值。

Answer 2

您需要像这样单独选择每个表行：

（在此示例中，我假设您的表的ID为orders）

document.getElementById("submit").onclick = function giveTotal() {
    // Get the table element (id="orders")
    const $table = document.getElementById('orders');
    // Get the grand total element
    const $grandTotal = document.getElementById('grandTotal');
    // Temporary variable
    let total = 0;
    // For each input element in the table add the price*value to total
    table.querySelectorAll('input').forEach($input => {
        total += (parseFloat($input.dataset.price) * $input.value)
    });
    // Write total to $grandTotal element
    $grandTotal.innerText = total;
    // Debug output
    console.log('Total: ' + total);
  };

Answer 3

您可以获取表行并进行处理。像这样的东西。

document.getElementById('submit').onclick = function() {
  var total = Array.from(document.querySelector('#cart tbody')
      .querySelectorAll('tr')) //get array
    .reduce((acc, cur) => acc + cur.querySelector('td:first-child').innerText * cur.querySelector('input').value, 0);
  console.log(total);
};

<table id="cart">
  <thead>
    <tr>
      <th>Price</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5.45</td>
      <td><input name="qty" type="text" value="0" />
        <!--number is ok too -->
      </td>
    </tr>
    <tr>
      <td>7.80</td>
      <td><input name="qty" type="text" value="0" />
        <!--number is ok too -->
      </td>
    </tr>
    <tr>
      <td>0.95</td>
      <td><input name="qty" type="text" value="0" />
        <!--number is ok too -->
      </td>
    </tr>
  </tbody>
</table>
<button type="button" id="submit">Submit</button>

从表中的每个输入获取数字

3 个答案: