我在开发jQuery时遇到了一个障碍。我想做的是，我有三个输入字段（数量、价格、总额），当用户在数量和价格中输入值时，他们的相乘答案将显示在总额列中。到目前为止还不错。
但是，然后我又添加了两个具有相同名称和id的输入或行，当我输入第一个输入的值（数量、价格）时，结果显示在所有字段名称输出中。现在，我知道为什么了，因为我在脚本中使用了名称输出来显示结果，我知道我可以给字段赋予不同的名称，我的代码也会起作用，但由于我必须为每一行编写脚本，我希望只使用一个脚本函数，并将其应用于每一行。
以及如何显示总计的总和？
摘要：我希望此代码像零售店中的发票系统一样工作
<?php
?>
<html>
<head>
<script src="script/script.js"></script>
<script>
$(document).ready(function(){
$("#price").keyup(function(){
var a=$("input[name='qty']").val();
var b=$("input[name='price']").val();
var r=$("input[name='output']").val(a * b);
});
});
</script>
</head>
<body>
<form method="POST">
<table style="border:1px solid purple">
<tr>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr id="test">
<td><input id="qty" type="text" name="qty"></td>
<td><input id="price" type="text" name="price"></td>
<td><input type="text" id="output" name="output"></td>
</tr>
<tr id="test">
<td><input id="qty" type="text" name="qty"></td>
<td><input id="price" type="text" name="price"></td>
<td><input type="text" id="output" name="output"></td>
</tr>
<tr id="test">
<td><input id="qty" type="text" name="qty"></td>
<td><input id="price" type="text" name="price"></td>
<td><input type="text" id="output" name="output"></td>
</tr>
</table>
<div id="grand">
Grand Total:<input type="text" name="gran" id="gran">
</div>
</form>
</body>
</html>
我们使用输入字段名称作为一个数组，如qty[]、price[]和output[]，然后使用jquery遍历每个元素每个循环，并根据索引获得值。
这是代码：
HTML:
<table style="border:1px solid purple">
<tr>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input class="output" type="text" name="output[]"></td>
</tr>
<tr>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input class="output" type="text" name="output[]"></td>
</tr>
<tr>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input class="output" type="text" name="output[]"></td>
</tr>
</table>
<div id="grand">
Grand Total:<input type="text" name="gran" id="gran">
</div>
Javascript：
$(document).ready(function() {
$(".price").keyup(function() {
var grandTotal = 0;
$("input[name='qty[]']").each(function (index) {
var qty = $("input[name='qty[]']").eq(index).val();
var price = $("input[name='price[]']").eq(index).val();
var output = parseInt(qty) * parseInt(price);
if (!isNaN(output)) {
$("input[name='output[]']").eq(index).val(output);
grandTotal = parseInt(grandTotal) + parseInt(output);
$('#gran').val(grandTotal);
}
});
});
});
jsfiddle链接：http://jsfiddle.net/xtj1g7z3/11/
首先，代码中最重要的错误是ID重复。ID必须完全唯一；每页一个。行的ID相同，输入的ID相同。如果要在不同的元素上共享相同的引用，请使用类。
因此，让我们从重写HTML:开始
<tr class="test">
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input class="output" type="text" name="output[]"></td>
</tr>
<tr class="test">
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input class="output" type="text" name="output[]"></td>
</tr>
<tr class="test">
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input class="output" type="text" name="output[]"></td>
</tr>
现在，让我们试着让jQuery工作起来。你说你不知道如何使用HTML输入数组，所以我在这里避免了。
$(document).ready(function() {
// if any of the qty or price inputs on the page change
$(".qty, .price").change(function() {
// find parent TR of the input being changed
var $row = $(this).closest('tr');
var a = $row.find(".qty").val();
var b = $row.find(".price").val();
var r = $row.find(".output").val(a * b);
});
});
如果你想更新"总计"框，你可以这样做：
// declare variable outside of loop
var total = 0;
// loop each table row with class .test
$('.test').each(function() {
var $row = $(this);
var value = $row.find('.price').val() * $row.find('.qty').val();
total = total + value;
});
$('#gran').val(total);
你可以把它添加到我上面构建的函数中，也可以让它运行一个更新按钮，这取决于你。
这些只是可能对你有所帮助的想法，不幸的是，我没有时间给你一个全面可行的解决方案。然而，我已经把这个答案做成了一个社区维基，所以希望有人能来改进它
祝你好运。
编写一个Javascript函数来循环输入元素，并更新total和grand-total元素。在模糊或更改等适当事件上调用该函数。有关基本的Javascript教程，请查找w3schools或codeacademy等基本网站。对于这样的功能，如果不掌握基本的Javascript或jQuery技能，就无法通过或完成很多工作。
试试下面这样的东西，它应该可以
HTML:
<tr id="test">
<td><input id="qty" type="text" name="qty1" class="1"></td>
<td><input id="price" type="text" name="price1" class="1"></td>
<td><input type="text" id="output" name="output1" class="1"></td>
</tr>
<tr id="test">
<td><input id="qty" type="text" name="qty2" class="2"></td>
<td><input id="price" type="text" name="price2" class="2"></td>
<td><input type="text" id="output" name="output2" class="2"></td>
</tr>
<tr id="test">
<td><input id="qty" type="text" name="qty3" class="3"></td>
<td><input id="price" type="text" name="price3" class="3"></td>
<td><input type="text" id="output" name="output3" class="3"></td>
</tr>
JS:
$("input[name^='price']").keyup(function(){
evaluateTotal($(this).attr('class'))
});
function evaluateTotal (value) {
var a=$("input[name='qty"+value+"']").val();
var b=$("input[name='price"+value+"']").val();
var r=$("input[name='output"+value+"']").val(a * b);
}