在 Asp.net core 2.2 中使用 jQuery 比较动态表中的两个值

Question

我有以下动态表

submit Quantity我想比较文本框和文本框的值 Stock，以检查Submit Quantity值是否大于stock所有行的值。

当submit Quantity文本框失去焦点时，我想检查，如果Submit Quantity值大于stock，我想显示一个警报“库存中没有足够的商品”，并且Submit Quantity文本框必须再次获得焦点。

我的 HTML 和 C#

<tbody>

@{ var i = 0;}

@foreach (var item in Model)

{

    <tr>

        <td></td>

        <td>

            <input type="text" name="[@i].GoodsName" readonly="readonly" asp-for="@item.GoodsName" class="form-control" />

        </td>

        <td>

            <input type="text" name="[@i].BrandName" readonly="readonly" asp-for="@item.BrandName" class="form-control" />

        </td>

        <td>

            <input type="text" name="[@i].Quantity" readonly="readonly" asp-for="@item.Quantity" class="form-control" />

        </td>

        <td>

            <input type="number" onblur="compare()" id="submitQ" class="form-control" />

        </td>

        <td>

            <input type="text" name="stock" id="stock" readonly="readonly" class="form-control" />

        </td>

    </tr>

}

我不知道该怎么做

任何帮助将不胜感激

提前致谢

编辑： 这就是我为实现结果所做的事情，但它仅适用于第一行Submit Quantity文本框，不适用于第二行

 function compare() {

        $('#submitQ').each(function () {

            let submit = $('#submitQ').val();

            let quantity = $('#stock').val();

            if (submit > quantity) {

                alert('Not enough goods!')

                $('#submitQ').select();

                return false

            }

        })

Answer 1

您不能拥有相同的多个元素ids，而是使用class选择器。然后，只需使用提交数量值$(this).val()和库存值.closest('tr').find('.stock')..，然后简单地比较这些值。演示代码：$('.submitQ').on("blur", function() {&nbsp; //get value of submit qnty&nbsp; let submit = $(this).val();&nbsp; //get stock&nbsp; let quantity = parseInt($(this).closest('tr').find('.stock').val());&nbsp; if (submit > quantity) {&nbsp; &nbsp; alert('Not enough goods!')&nbsp; &nbsp; $(this).focus(); //show focus&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <thead>&nbsp; &nbsp; <th>No</th>&nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; <th>Brand</th>&nbsp; &nbsp; <th>Requested Quantity</th>&nbsp; &nbsp; <th>Submit Quantity</th>&nbsp; &nbsp; <th>Stock</th>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="[@i].GoodsName" readonly="readonly" asp-for="@item.GoodsName" value="something" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="[@i].BrandName" readonly="readonly" asp-for="@item.BrandName" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="[@i].Quantity" readonly="readonly" asp-for="@item.Quantity" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <!--use class-->&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="submitQ" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="stock" value="8" class="stock" readonly="readonly" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="[@i].GoodsName" readonly="readonly" asp-for="@item.GoodsName" value="something" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="[@i].BrandName" readonly="readonly" asp-for="@item.BrandName" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="[@i].Quantity" readonly="readonly" asp-for="@item.Quantity" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="submitQ" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="stock" value="5" class="stock" readonly="readonly" class="form-control" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>