Как выполнить расчет, при котором значение должно быть введено в строку для каждой строки таблицы с помощью Razor Pages и JavaScript?

У меня есть таблица данных о продуктах, и пользователь может ввести количество продукта для покупки в каждой строке. Я хотел бы вычислить общую цену за продукт в каждой строке, а затем общую стоимость всей покупки под таблицей.

Это моя таблица:

<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 для доступа к элементам пользовательского интерфейса. Как я могу получить доступ к строке таблицы, в которой находится фокус 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>

javascript asp.net-core razor-pages
person eisem    schedule 05.11.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это может сработать, если есть только одна запись. Но у вас есть несколько строк записи. Каждый идентификатор Price и Total одинаков. Вам нужно различать идентификатор, как показано ниже:

<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>       
}

Результат:

введите описание изображения здесь

person Rena    schedule 06.11.2020
comment
Большое тебе спасибо. Это полезно. - person eisem; 06.11.2020