在foreach代码中使用javascript进行实时计算
现在我正在做laravel项目,用javascipt实现函数实时计算结果。我将在foreach代码中使用javascript进行实时计算,javascript,php,arrays,laravel,Javascript,Php,Arrays,Laravel,现在我正在做laravel项目,用javascipt实现函数实时计算结果。我将和foreach()结合起来。这是我的桌子设计 每个人都有不同的列表项 我们可以在“价格”和“双盎司(%)”栏中输入数字 实时计算将放在每个“结果地点”、底部“授予总价”、底部“授予总折扣”和“授予总结果价”上 下面是html代码 <table> <thead> <tr> <th>name</th>
和foreach()结合起来。这是我的桌子设计
- 每个人都有不同的列表项
- 我们可以在“价格”和“双盎司(%)”栏中输入数字
- 实时计算将放在每个“结果地点”、底部“授予总价”、底部“授予总折扣”和“授予总结果价”上
下面是html代码
<table>
<thead>
<tr>
<th>name</th>
<th>Item</th>
<th>price</th>
<th>Discount (%)</th>
<th>result price</th>
</tr>
</thead>
<tbody>
<!-- Ussy Sulistiawaty -->
<tr>
<td rowspan="2">Ussy Sulistiawaty</td>
<td>top video</td>
<td><input class="profile-3-price-0" type="number" name="price[xx]" ></td>
<td><input class="profile-3-discount-0" type="number" name="discount[xx]" ></td>
<td><span id="profile-3-result-0"></span></td>
</tr>
<tr>
<td>top post</td>
<td><input class="profile-3-price-1" type="number" name="price[xx]" ></td>
<td><input class="profile-3-discount-1" type="number" name="discount[xx]" ></td>
<td><span id="profile-3-result-1"></span></td>
</tr>
<!-- Andrea Dian Bimo -->
<tr>
<td rowspan="3">Andrea Dian Bimo</td>
<td>top Post</td>
<td><input class="profile-10-price-0" type="number" name="price[xx]" ></td>
<td><input class="profile-10-discount-0" type="number" name="discount[xx]" ></td>
<td><span id="profile-10-result-0"></span></td>
</tr>
<tr>
<td>top video</td>
<td><input class="profile-10-price-1" type="number" name="price[xx]" ></td>
<td><input class="profile-10-discount-1" type="number" name="discount[xx]" ></td>
<td><span id="profile-10-result-1"></span></td>
</tr>
<tr>
<td>top story</td>
<td><input class="profile-10-price-2" type="number" name="price[xx]" ></td>
<td><input class="profile-10-discount-2" type="number" name="discount[xx]" ></td>
<td><span id="profile-10-result-2"></span></td>
</tr>
<!-- Shandy Aulia -->
<tr>
<td>Shandy Aulia</td>
<td>top video</td>
<td><input class="profile-13-price-0" type="number" name="price[xx]" ></td>
<td><input class="profile-13-discount-0" type="number" name="discount[xx]" ></td>
<td><span id="profile-13-result-0"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Grand Total</th>
<th> <span id="totalprice"></span> </th>
<th> <span id="totaldiscount"></span> </th>
<th> <span id="totalresultprice"></span></th>
</tr>
</tfoot>
</table>
但是这个脚本不能正常工作。因为它读取列号。如果您看到,我的表使用代码行span
。所以脚本不起作用。我理解类名和id名的概念索引。但我仍然困惑,如何使用javascript代码实现
请帮助解决这个问题。有人能帮我吗?有人能帮我吗?
$("tbody").on("input", function() {
const totalinternalcost = $(".internalCost").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)
$("#totalinternalcost").text(totalinternalcost);
const totalEach = $(".internalCost").map(function(i, input) {
const internalCost = input.value && !isNaN(input.value) ? +input.value : 0;
let grossProfit = $(input).closest("td").next().find("input").val();
grossProfit = grossProfit && !isNaN(grossProfit) ? +grossProfit : 0;
const val = (internalCost - internalCost * (grossProfit/100))
$(input).closest("tr").find("td").eq(4).text(val.toFixed(2))
return val;
}).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)
$("#totalcostperunit").text(totalEach.toFixed(2))
const totalgrossprofit = $(".grossProfit").map(function(i, input) {
return input.value && !isNaN(input.value) ? +input.value : 0;
}).get().reduce((acc, cur) => {
acc += cur;
return acc;
}, 0)
$("#totalgrossprofit").text(totalgrossprofit);
});