如何使用 Razor Pages 和 JavaScript 計算表格的每一行必須在一行中輸入一個值？

Question

我有一個產品數據表，用戶可以在每一行中輸入要購買的產品數量。 我想計算每一行中每個產品的總價，然后計算表格下方的整個購買的總價。

這是我的表：

<table id="productTable">
<thead>
    <tr>
        <th>Amount</th>
        <th>
            @Html.DisplayNameFor(model => model.Products[0].Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products[0].Price)
        </th>
        <th>Total</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.Products)
    {
        <tr>
            <td>
                <input type="number" id="quantityInput" onchange="calcSubTotal()" min="0" value="0" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td id="priceLabel">
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td id="labelSubTotal"></td>
        </tr>
    }
</tbody>

這些項目來自模型 (IList)。 我想使用 JavaScript 將輸入的輸入值（類型編號）與相應行的價格相乘。

在 JavaScript 中，我使用 getElementById 來訪問 UI 元素。 如何訪問 HTML 輸入焦點所在的表格行？

我的 JavaScript：

<script type="text/javascript">
    function calcSubTotal() {
        var numberInput = document.getElementById('quantityInput');
        var val = numberInput.value;
        var amount = parseFloat(val);
        var priceLabel = document.getElementById('priceLabel');
        var priceValue = priceLabel.innerText;
        var price = parseFloat(priceValue);
        var totalPrice = amount * price;
        var subTotalLabel = document.getElementById('labelSubTotal');
        subTotalLabel.innerText = totalPrice.toString();
    }
</script>

Answer 1

如果只有一條記錄，它可能會工作。但是您有幾條記錄的原始記錄。價格和總計的每個 id 是相同的。您需要像下面這樣區分 id：

<table id="productTable">
    //..
    <tbody>
        @{ 
            int i = 0;   //add this..
        }
        @foreach (var item in Model.Products)
        {
            <tr>
                <td>
                                        //change the onchange function...
                    <input type="number" id="quantityInput" onchange="calcSubTotal(this,@i)" min="0" value="0" />
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td id="priceLabel_@i">           //change here...
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td id="labelSubTotal_@i"></td>    //change here...
            </tr>
            i++;   //add this....
        }
    </tbody>

</table>
@section Scripts
{
    <script type="text/javascript">
        function calcSubTotal(element,index) {
            var numberInput = $(element).val();  
            var amount = parseFloat(numberInput);
            var priceLabel = document.getElementById('priceLabel_'+index);
            var priceValue = priceLabel.innerText;
            var price = parseFloat(priceValue);
            var totalPrice = amount * price;
            var subTotalLabel = document.getElementById('labelSubTotal_'+index);
            subTotalLabel.innerText = totalPrice.toString();
        }
    </script>       
}

結果：