Question

我再次问这个问题，因为我有一个新问题。我有两个输入字段，一个用于预付款，另一个用于全额付款，这些字段是从数组中的数据库中提取的。

如果onchange或keyup预付款超过全额付款，则不应输入预付款或应等于全额付款。

我之前得到了以下对我有用的答案，但现在我有一个新问题。它适用于以数组形式从数据库中提取的现有数据。但是，当我使用JavaScript增加一个新行时，它无法使用它。

我正在尝试使用此代码

＆＃13;

$('.advance').on('change keyup blur', function(e) {
    id_arr = $(this).attr('id');
    id = id_arr.split("_");
    var fullPay = $('#fullPayment_' + id[1]).val();
    var advancePay = $('#advancePayment_' + id[1]).val();
    if ($(this).val() > parseInt(fullPay)) {
        e.preventDefault();
        $(this).val(fullPay);
    }
});


var i = $('table tr').length;

$("#newRow").on('click', function() {
    html = '<tr>';
    html += '<td><input type="number" value="15" id="fullPayment_' + i + '"></td>';

    html += '<td><input type="number" id="advancePayment_' + i + '" class="advance"></td>';

    html += '</tr>';
    $('table').append(html);
    i++;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <input type="number" value="12" id="fullPayment_1">
        </td>
        <td>
            <input type="number" id="advancePayment_1" class="advance">
        </td>
    </tr>
    <tr>
        <td>
            <input type="number" value="19" id="fullPayment_2">
        </td>
        <td>
            <input type="number" id="advancePayment_2" class="advance">
        </td>
    </tr>
</table>
<button type="button" id="newRow"> + Add </button>

＆＃13;

Answer 1

尝试将事件处理程序更改为以下格式：

$(document).on('change keyup blur','.advance', function(e){... });

有关活动授权的更多信息，请访问：https://learn.jquery.com/events/event-delegation/

演示：http://jsfiddle.net/GCu2D/3643/

$(document).on('change keyup blur', '.advance', function(e) {
  id_arr = $(this).attr('id');
  id = id_arr.split("_");
  var fullPay = $('#fullPayment_' + id[1]).val();
  var advancePay = $('#advancePayment_' + id[1]).val();
  if ($(this).val() > parseInt(fullPay)) {
    e.preventDefault();
    $(this).val(fullPay);
  }
});


var i = $('table tr').length;
$("#newRow").on('click', function() {
  html = '<tr>';
  html += '<td><input type="number" value="15" id="fullPayment_' + i + '"></td>';

  html += '<td><input type="number" id="advancePayment_' + i + '" class="advance"></td>';

  html += '</tr>';
  $('table').append(html);
  i++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="number" value="12" id="fullPayment_1"></td>
    <td><input type="number" id="advancePayment_1" class="advance"></td>
  </tr>
  <tr>
    <td><input type="number" value="19" id="fullPayment_2"></td>
    <td><input type="number" id="advancePayment_2" class="advance"></td>
  </tr>
</table>
<button type="button" id="newRow"> + Add </button>

Answer 2

您的代码可以更加动态和自动化。

也许是这样的事情;

<table>
  <tr>
    <td><input type="number" value="12" id="fullPayment_1" class="fullPayment"></td>
    <td><input type="number" value="0" id="advancePayment_1" class="advance"></td>
  </tr>
  <tr>
    <td><input type="number" value="19" id="fullPayment_2" class="fullPayment"></td>
    <td><input type="number" value="0" id="advancePayment_2" class="advance"></td>
  </tr>
</table>


$(function() {

//Put it on the parent element so new inputs have the binding too
  $('table').on('keyup', '.advance', function() {
  //Get the together belonging advance and fullpayment rows
    var $advance = $(this);
    var $fullPayment = $(this).parents('tr').find('.fullPayment');
    //Pars the values to numerics for a good comparison
    var advanceValue = parseFloat($advance.val());
    var fullValue = parseFloat($fullPayment.val());
    console.log(advanceValue, fullValue)
    if (advanceValue > fullValue) {
      $advance.val(fullValue);
    }

  });

});

查看此工作JSFiddle

一个输入字段值不应大于表的其他字段值

2 个答案: