在foreach代码中使用javascript进行实时计算

在foreach代码中使用javascript进行实时计算,javascript,php,arrays,laravel,Javascript,Php,Arrays,Laravel,现在我正在做laravel项目,用javascipt实现函数实时计算结果。我将和foreach()结合起来。这是我的桌子设计 每个人都有不同的列表项 我们可以在“价格”和“双盎司(%)”栏中输入数字 实时计算将放在每个“结果地点”、底部“授予总价”、底部“授予总折扣”和“授予总结果价”上 下面是html代码 <table> <thead> <tr> <th>name</th>

现在我正在做laravel项目,用javascipt实现函数实时计算结果。我将
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);

    });