現在我正在工作 laravel 項目，使用 javascript 實現實時計算結果。但條件是，實時計算在 foreach() 代碼中。情況是這樣的背景黃色是<input>代碼背景紅色是Javascript實時計算的結果實時計算有兩種實現方式：獲取每行的結果“Total Each”獲取每列的結果“總計”現在起。我只能獲得“美元價格”列和“折扣”列的“總計”。問題是 ：我仍然無法獲得每行“Total Each”的實時結果， E2 = C2-(C2*D2), E3= C3-(C3*D3), E4= C4-(C4*D4), E5= C5-(C5*D5)“總計”列的總計，E6 = E2 + E3 + E4 + E5$(document).ready(function() { $(".price").keyup(function() { var totalprice = 0; $.each($(".price"), function(key, input) { if (input.value && !isNaN(input.value)) { totalprice += parseFloat(input.value); } }); $("#totalprice").html(totalprice); }); $(".discount").keyup(function() { var totaldiscount = 0; $.each($(".discount"), function(key, input) { if (input.value && !isNaN(input.value)) { totaldiscount += parseFloat(input.value); } }); $("#totaldiscount").html(totaldiscount); });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><table> <tr> <td>Name</td> <td>Items</td> <td>Price in dollar</td> <td>Discount %</td> <td>Total Each</td> </tr> @foreach ($buyers as $key => $val) <tr> <td>{{ $val['name'] }}</td> <td>{{ $val['items'] }}</td> <td><input class='price' name="price[ {{$key}} ][ {{$val['id']}} ]" type="text"></td> <td><input class='discount' name="discount[ {{$key}} ][ {{$val['id']}} ]" type="text"></td> <td> ?get total each? </td> </tr> @endforeach <tr> <td rowspan="2">Grand Total</td> <td><span id="totalprice"></span></td> <td><span id="totaldiscount"></span></td> <td> get "grand total" from "total each" </td> </td></table>
1 回答
aluckdog
TA貢獻1847條經驗 獲得超7個贊
只需對任何更改運行相同的函數
添加了 thead、tbody 和 tfoot 并修復了總計的行跨度
使用 jQuery map 和 JS reduce 來獲取總數
使用最接近的導航字段。
$(input).closest("td").next().find("input").val();如果你給行總計一個類，你可以簡化
$(function() {
$("tbody").on("input", function() {
const totalPrice = $(".price").map(function(i, input) {
const val = input.value && !isNaN(input.value) ? +input.value : 0;
$(input).closest("tr").find("td").eq(4).text(val)
return val;
}).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)
$("#totalprice").text(totalPrice);
const totalEach = $(".price").map(function(i, input) {
const price = input.value && !isNaN(input.value) ? +input.value : 0;
let discount = $(input).closest("td").next().find("input").val();
discount = discount && !isNaN(discount) ? +discount : 0;
const val = (price - price * (discount/100))
$(input).closest("tr").find("td").eq(4).text(val.toFixed(2))
return val;
}).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)
$("#totalEach").text(totalEach.toFixed(2))
const totalDiscount = $(".discount").map(function(i, input) {
return input.value && !isNaN(input.value) ? +input.value : 0;
}).get().reduce((acc, cur) => {
acc += cur;
return acc
}, 0)
$("#totaldiscount").text(totalDiscount);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Items</th>
<th>Price in dollar</th>
<th>Discount %</th>
<th>Total Each</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td>Item 1</td>
<td><input class='price' name="price[xxx]" type="text"></td>
<td><input class='discount' name="discount[xxx]" type="text"></td>
<td></td>
</tr>
<tr>
<td>Name 1</td>
<td>Item 1</td>
<td><input class='price' name="price[yyy]" type="text"></td>
<td><input class='discount' name="discount[yyy]" type="text"></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Grand Total</td>
<td><span id="totalprice"></span></td>
<td><span id="totaldiscount"></span></td>
<td id="totalEach"> </td>
</tr>
</tfoot>
</table>
- 1 回答
- 0 關注
- 110 瀏覽
添加回答
舉報
0/150
提交
取消