我是如何用计算jquery制作订单的

Question

我希望每行有一个默认价格，并且该行中的所有输入都必须求和*默认价格。这段代码可以工作，但我知道我有一个foreach行，我想把所有行放在一起。在这个例子中，我有两行。每行有4个输入，每一个输入都必须求和，并且输入的总和*每行的默认价格

// main function when page is opened
(function($) {
$(function() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function() {
$(this).find('input[type=text]').bind("keyup", function() {
calculateSum();
});
});
function calculateSum() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function() {
var sum = 0;
$(this).find('input[type=text]').not('.total').each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$(this).find('.total').val(sum.toFixed(2));
});
}
});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table name="tbl_a" id="tbl_a">
<tbody>
<tr>
<td></td>
<td></td>
<td>Wit</td>
<td>Bruin</td>
<td>Kaiser</td>
<td>Pistolet wit</td>
<td>Pistolet bruin</td>
</tr>
<tr class="item">
<td width="200">Hagelslag puur</td>
<td class="price" width="80">1.00</td>
<td class="q"><input type="text" name="data[Order][3][q][Wit]" id="dataOrder3qWit" value=""></td>
<td class="q"> <input type="text" name="data[Order][3][q][Bruin]" id="dataOrder3qBruin" value=""></td>
<td class="q"> <input type="text" name="data[Order][3][q][Kaizer]" id="dataOrder3qKaizer" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistWit]" id="dataOrder3qPistWit" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistBruin]" id="dataOrder3qPistBruin" value=""></td>
<td>
<input type="text" class="form-control total" name="at[total_1]" id="total_1" value="" placeholder="total" style="width:160px;" />
</td>
</tr>
<tr class="item">
<td width="200">Hagelslag melk</td>
<td class="price" width="80">1.00</td>
<td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
<td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
<td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
<td>
</td>
</tr>
</table>
<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total" style="width:160px;" />

Answer 1

我认为您希望在每一行中添加每个输入值。然后对所有class="total"值求和。如果我是正确的，那么下面的代码可能会起作用。但尽量不要使用重复的id。我希望它能起作用。HTML:

<table name="tbl_a" id="tbl_a">
<tbody>
<tr>
<td></td>
<td></td>
<td>Wit</td>
<td>Bruin</td>
<td>Kaiser</td>
<td>Pistolet wit</td>
<td>Pistolet bruin</td>
</tr>
<tr class="item">
<td width="200">Hagelslag puur</td>
<td class="price" width="80">1.00</td>
<td class="q"><input type="text" name="data[Order][3][q][Wit]" id="dataOrder3qWit" value=""></td>
<td class="q"> <input type="text" name="data[Order][3][q][Bruin]" id="dataOrder3qBruin" value=""></td>
<td class="q"> <input type="text" name="data[Order][3][q][Kaizer]" id="dataOrder3qKaizer" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistWit]" id="dataOrder3qPistWit" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistBruin]" id="dataOrder3qPistBruin" value=""></td>
<td>
<input type="text" class="form-control total" name="at[total_1]" id="total_1" value="" placeholder="total" />
</td>
</tr>
<tr class="item">
<td width="200">Hagelslag melk</td>
<td class="price" width="80">1.00</td>
<td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
<td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
<td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
<td>
<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total"  />
</td>
</tr>
<tr class="item">
<td width="200">Hagelslag melk</td>
<td class="price" width="80">1.00</td>
<td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
<td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
<td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
<td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
<td>
<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total"  />
</td>
</tr>
</table>
<input type="text" id="finalTotal"  name="at[total_2]" placeholder="total"  /> 

Jquery：

// main function when page is opened
(function($) {
$(function() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function() {
$(this).find('input[type=text]').bind("keyup", function() {
calculateSum();
});
});
function calculateSum() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function() {
var sum = 0;
var total_sum = 0; // for final sum
$(this).find('input[type=text]').not('.total').each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$(this).find('.total').val(sum.toFixed(2));
// for final sum
$('.total').each(function(){
total_sum += parseFloat(this.value);
$("#finalTotal").val(total_sum);
});
});
}
});
})(jQuery);