javascript - 一个输入字段值不应大于表的其他字段值
问题描述
我再次问这个问题是因为我有一个新问题。我有两个输入字段,一个用于预付款,另一个用于全额付款,它们是从数组中的数据库中获取的。
如果onchange
或keyup
预付款大于全额付款,则预付款不应输入或应等于全额付款。
我以前得到了以下对我有用的答案,但现在我有一个新问题。它适用于以数组形式从数据库中获取的现有数据。但是当我用 JavaScript 增加一个新行时,它不能在其中工作。
我正在尝试使用此代码
$('.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++;
});
<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>
解决方案
尝试将事件处理程序更改为这种格式:
$(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>
推荐阅读
- mysql - How to access mysql inside MasterNode of the dataproc cluster?
- laravel - 如何在laravel收银员中预览配给?
- git - 如何防止来自 github 的 pip install 添加虚假斜线并失败?
- r - 如何将数据框的元素映射到 R 中的另一个数据框?
- node.js - 在 mono-repo 节点 js 项目上应用 semver
- ruby-on-rails - 验证数组 Active Record 中的包含时出错
- r-markdown - 如何为使用 rmarkdown 创建的 PowerPoint 文件中的图像添加替代文本(用于辅助功能)?
- c++ - O(1) 追加和 O(1) 随机访问数据结构
- javascript - 反应:输入不反映变化
- nginx - 如何为标准和 www 设置 SSL。在 nginx 中使用 Let's Encrypt 的域?