javascript - 如果条件不适用于所有 td 值？

Question

我正在使用 html 表，当我选中我想比较每个 tr 中的 td 值的复选框时，这个条件对于从 2nd tr 开始的 1st tr 工作正常，但条件不起作用。
HTML 代码 -

<form role="form" name="conForm" id="conForm">
                    <span id="error" class="text-danger"></span>
                    <div class="table-responsive">
                        <table id="myPTable" class="table table-xss table-hover table-bordered">
                        <thead>
                        <tr>
                        <th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
                        <th class="control-label paddingtop">SI No</th>
                        <th class="control-label paddingtop">Products</th>
                        <th class="control-label paddingtop">Pending Qty</th>
                        <th class="control-label paddingtop">Quantity</th>
                        <th class="control-label paddingtop">Amount</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                        <td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
                        <td>1</td>
                        <td>HMIS HMIS HMIS HMIS</td>
                        <td class="availableQty">10</td>
                        <td><input  type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
                        <td>3000</td>
                        </tr>
                        <tr>
                        <td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
                        <td>2</td>
                        <td>ERP</td>
                        <td class="availableQty">1</td>
                        <td><input  type="number" name="select[]" class="enterQty" value="1" style="width:50px;" ></td>
                        <td>9000</td>
                        </tr>
                        <tr>
                        <td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
                        <td>3</td>
                        <td>Inventory</td>
                        <td class="availableQty">10</td>
                        <td><input  type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
                        <td>13000</td>
                        </tr>
                        <tr><td><button class="btn-info">Save</button></td></tr>
                        </tbody>
            </table>
            </form>

这是jquery代码 -

$(".btn-info").on("click",function(){
               
                var check = $('.checkproduct');              
                  if(check.is(':checked')){
                      
                      var pending="";
                      $('#myPTable tr').each(function() {
                        pending += $(this).find(".availableQty").html();    
                        console.log(pending);
                      });
                
                      var enterqty ="";
                      $('#myPTable tr').each(function() {
                        enterqty += $(this).find(".enterQty").val();
                        console.log(enterqty);
                      });

                      if(enterqty > pending){
                          $("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");                          
                      }else if(enterqty== 0){
                          $("#error").html("<p>you have checked the product please enter quantity</p>");
                        }
                              else{                          
                        var checked = $('.checkproduct:checked').size();
                      }

我写的 jquery 仅适用于第一行，但它需要适用于将要检查的每项工作。现在只有你们可以帮助我，在此先感谢。

标签： javascripthtmljqueryif-statementconditional-statements

Answer 1

我已经对您的代码进行了一些修改，但我相信这就是您想要的。

$(".btn-info").on("click", function() {
  var pending =0;
  var enterqty=0;
  $('#myPTable .checkproduct:checked').each(function() {
    pending += (+$(this).closest('tr').find(".availableQty").text());
    enterqty += (+$(this).closest('tr').find(".enterQty").val());
  });

  if (enterqty > pending) {
    $("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
  } else if (enterqty == 0) {
    $("#error").html("<p>you have checked the product please enter quantity</p>");
  } else {
    //var checked = $('.checkproduct:checked').size();
  }
});

演示

$(".btn-info").on("click", function() {
  var pending =0;
  var enterqty=0;
  $('#myPTable .checkproduct:checked').each(function() {
    pending += (+$(this).closest('tr').find(".availableQty").text());
    enterqty += (+$(this).closest('tr').find(".enterQty").val());
  });

  if (enterqty > pending) {
    $("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
  } else if (enterqty == 0) {
    $("#error").html("<p>you have checked the product please enter quantity</p>");
  } else {
    //var checked = $('.checkproduct:checked').size();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="conForm" id="conForm">
  <span id="error" class="text-danger"></span>
  <div class="table-responsive">
    <table id="myPTable" class="table table-xss table-hover table-bordered">
      <thead>
        <tr>
          <th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
            <th class="control-label paddingtop">SI No</th>
            <th class="control-label paddingtop">Products</th>
            <th class="control-label paddingtop">Pending Qty</th>
            <th class="control-label paddingtop">Quantity</th>
            <th class="control-label paddingtop">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
          <td>1</td>
          <td>HMIS HMIS HMIS HMIS</td>
          <td class="availableQty">10</td>
          <td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
          <td>3000</td>
        </tr>
        <tr>
          <td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
          <td>2</td>
          <td>ERP</td>
          <td class="availableQty">1</td>
          <td><input type="number" name="select[]" class="enterQty" value="1" style="width:50px;"></td>
          <td>9000</td>
        </tr>
        <tr>
          <td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
          <td>3</td>
          <td>Inventory</td>
          <td class="availableQty">10</td>
          <td><input type="number" name="select[]" class="enterQty" value="12" style="width:50px;"></td>
          <td>13000</td>
        </tr>
        <tr>
          <td><button type="button" class="btn-info">Save</button></td>
        </tr>
      </tbody>
    </table>