ajax - JQuery在AJAX中乘以表行的输入值
问题描述
我想通过将单个行的输入相乘来计算每一行的总价格,然后最后通过使用 JQuery 将 Total 列的所有总值相加来计算总计。当我输入值时,我只会让第一行显示总计。任何帮助将不胜感激。
刀
@foreach($service->invoices as $invoice)
<tr>
<td class="text-right">{{ $invoice->description }}</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="price">{{ $invoice->price }}</td>
<td class="total">0</td>
</tr>
@endforeach
脚本
<script>
$("#decrease , #increment , .quantity").on("click input", function() {
var selectors = $(this).closest('tr'); //get closest tr
var quantity = selectors.find('.quantity').val(); //get qty
if (!quantity || quantity < 0)
return;
var price = parseFloat(selectors.find('.price').text());
var total = (price * quantity);
selectors.find('.total').text(total); //add total
mult += total;
$("#grandTotal").text(mult);
})
</script>
解决方案
您需要遍历tr
以获取total
每个 td 中的值,然后检查该值是否不为空,并根据此将该值添加到mult
.Also 中,您需要根据该值使用class
而不是id
更改查询选择器 :.increment
和.decrease
.
演示代码:
$(".decrease , .increment , .quantity").on("click input", function() {
var selectors = $(this).closest('tr'); //get closest tr
var quantity = selectors.find('.quantity').val(); //get qty
if (!quantity || quantity < 0)
return;
var price = parseFloat(selectors.find('.price').text());
var total = (price * quantity);
selectors.find('.total').text(total); //add total
var mult = 0;
//loop through trs
$("tr").each(function() {
//get total value check its not "" else give value =0 to avoid Nan error
var total = $(this).find(".total").text() != "" ? $(this).find(".total").text() : 0;
mult = parseFloat(total) + mult;
})
//add value to div
$("#grandTotal").text(mult);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="text-right">A</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<!--just add class-->
<button class="minus decrease" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease">-</button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus increment" id="increment">+</button>
</div>
</div>
</div>
</div>
</td>
<td class="price">13
<td class="total"></td>
</tr>
<tr>
<td class="text-right">B</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<!--just add class-->
<button class="minus decrease" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease">-</button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus increment" id="increment ">+</button>
</div>
</div>
</div>
</div>
</td>
<td class="price">135
<td class="total"></td>
</tr>
</table>
Grand Total :
<div id="grandTotal">0</div>
推荐阅读
- pandas-groupby - 检查 Pandas 组中的所有行是否相同
- powershell - Powershell 使用不同的分隔符将内容添加到 CSV 中的输出值
- python - 有没有一种方法可以读取和处理 PDF 文件并将输出上传回 Blob 存储中,而无需使用 Python 在本地下载它们?
- graphics - 如何获得偏移量在 Y 轴上的旋转角度
- python - 如何通过xlwings模块将pandas数据框的数据连续打印到excel中
- docker - 在 ENTRYPOINT 开始之前将 Env 变量从 initContainer 注入主容器
- jmeter - 403 - 禁止:访问在 JMeter 中被拒绝
- javascript - CSS - 通过.map函数显示项目时旋转动画失去过渡属性
- javascript - Function.prototype.bind() 不接受超过 5 个参数?
- kubernetes - 如何调整 kubernetes.yml 以使 livenessprobe 仅在五次运行状况检查失败后才会失败