在 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() {

  //get value of submit qnty

  let submit = $(this).val();

  //get stock

  let quantity = parseInt($(this).closest('tr').find('.stock').val());

  if (submit > quantity) {

    alert('Not enough goods!')

    $(this).focus(); //show focus

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <thead>

    <th>No</th>

    <th>Name</th>

    <th>Brand</th>

    <th>Requested Quantity</th>

    <th>Submit Quantity</th>

    <th>Stock</th>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>

        <input type="text" name="[@i].GoodsName" readonly="readonly" asp-for="@item.GoodsName" value="something" 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>

        <!--use class-->

        <input type="number" class="submitQ" class="form-control" />

      </td>

      <td>

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

      </td>

    </tr>

    <tr>

      <td>2</td>

      <td>

        <input type="text" name="[@i].GoodsName" readonly="readonly" asp-for="@item.GoodsName" value="something" 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" class="submitQ" class="form-control" />

      </td>

      <td>

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

      </td>

    </tr>

  </tbody>

</table>