Question

我正在尝试设置订单，我想在项目旁边显示小计，我希望它在更改时更新实时。我尝试构建一个javascript来使这项工作，但无法搞清楚。

<table>
  <tr>
    <td width="48"><strong>PRICE</strong></td>
    <td width="144"><strong>QTY</strong></td>
    <td width="84"><div align="center"><strong>SUBTOTAL</strong></div></td>
  </tr>
  <tr>
    <td>$7.00</td>
    <td><input name="Item1" type="number" id="Item1" max="5" min="0" value="0"></td>
    <td><div align="center"><span id="span_totalItem1">$0.00</span></div></td>
  </tr>
  <tr>
    <td>$9.54</td>
    <td><input name="Item2" type="number" id="Item2" max="5" min="0" value="0"></td>
    <td><div align="center"><span id="span_totalItem2">$0.00</span></div></td>
  </tr>
</table>

Answer 1

<script type="text/javascript">
function updateItem1() {
    var x = document.getElementById("Item1").value;
    document.getElementById("span_totalItem1").innerHTML = "$" + x*7;
}

function updateItem2() {
    var x = document.getElementById("Item2").value;
    document.getElementById("span_totalItem2").innerHTML = "$" + x*9.54;
}
</script>

在您的两个输入上添加事件oninput：

<table>
  <tr>
    <td width="48"><strong>PRICE</strong></td>
    <td width="144"><strong>QTY</strong></td>
    <td width="84"><div align="center"><strong>SUBTOTAL</strong></div></td>
  </tr>
  <tr>
    <td>$7.00</td>
    <td><input name="Item1" type="number" id="Item1" max="5" min="0" value="0" oninput="updateItem1()"></td>
    <td><div align="center"><span id="span_totalItem1">$0.00</span></div></td>
  </tr>
  <tr>
    <td>$9.54</td>
    <td><input name="Item2" type="number" id="Item2" max="5" min="0" value="0" oninput="updateItem2()"></td>
    <td><div align="center"><span id="span_totalItem2">$0.00</span></div></td>
  </tr>
</table>

Answer 2

我想在接受的答案中添加一些内容，因为它可能仅适用于两种产品，但如果你说10或20，你不想为每个产品编写一个函数它们。

因此，只需要一个功能就可以了解所有产品。这里有一个使用3种产品的例子：

<h1 style="color:red;font-size:28px;">M E M O</h1>

和javascript：

<table>
  <tr>
    <td width="48"><strong>PRICE</strong></td>
    <td width="144"><strong>QTY</strong></td>
    <td width="84"><div align="center"><strong>SUBTOTAL</strong></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=7>$7.00</td>
    <td><input class="productAmount" name="Item1" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=9.54>$9.54</td>
    <td><input class="productAmount" name="Item2" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=11.22>$11.22</td>
    <td><input class="productAmount" name="Item3" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
</table>

https://jsfiddle.net/n859snjp/1/

订单中的实时更新小计

2 个答案: