时间戳

首页 > 解决方案 > 在 Asp.net core 2.2 中使用 jQuery 比较动态表中的两个值

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

问题描述

我有以下动态表

在此处输入图像描述

我想将 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
            }
        })

标签： javascriptjquery

解决方案

您不能使用相同的多个元素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>

推荐阅读