Html Jquery-输入的总数量不应超过当前值

需要防止用户输入的数量超过现有数量。它应该检查变更事件和提交点击中输入的总数量

例如，当用户添加行时，第一行（第1部分）有50个数量，根据“第1部分”输入的总数量不应超过50，并且应在该行上方显示文本。任何帮助都将不胜感激

HTML:

第一部分
+
第二部分
+

Jquery：

$(function() {
  $('#exampleTbl').delegate('button.addRow', 'click', function() {
    var row = $(this).closest('tr'); // get the parent row of the clicked button
    var html = $(this).closest('tr').clone();
    $(html).insertAfter(row); // insert content
    
    let btn = $('<a href="javascript: void(0)" title="Click to remove">Remove</a>');
    btn.click(function () {
      $(html).remove(); // Remove row on click
    })
    
    $(html).find('.addRow').replaceWith(btn);
  });
});

$（函数（）{
$（'exampleTbl'）.delegate（'button.addRow'，'click'，function（）{
var row=$（this）.closest（'tr'）；//获取所单击按钮的父行
var html=$（this.close（'tr'）.clone（）；
$（html）.insertAfter（行）；//插入内容
设btn=$（''）；
点击（函数（）{
$（html）.remove（）；//单击删除行
})
$（html）.find（'.addRow'）.replaceWith（btn）；
});
});

在下面的代码片段中，我将类提供给了您的TR，以将它们与原始数量和用户可以更改的数量区分开来。此外，每当用户更改输入时，我们需要找到

第1部分

或

第2部分

的所有数量之和。因此，我使用

tr

类，该类将具有

第1部分

或

第2部分

来迭代trs输入

演示代码：

$（函数（）{
$（'exampleTbl'）.delegate（'button.addRow'，'click'，function（）{
var row=$（this）.closest（'tr'）；//获取所单击按钮的父行
var html=$（this.close（'tr'）.clone（）；
$（html）.insertAfter（行）；//插入内容
设btn=$（''）；
点击（函数（）{
$（html）.remove（）；//单击删除行
})
$（html）.find（'.addRow'）.replaceWith（btn）；
});
});
$（文档）.on（“更改”，“输入”，函数（））{
var总和=0；
$（“.total_qty_entered”）.remove（）；//remove div
var name=$（this）.closest（'tr'）.attr（'class'）；//获取类
//获取原始数量
变量数量=$（“+name+”_original”）.find（'td:eq（2）'）.text（）；
//使用相同的类>输入通过tr循环
$（“+name+”输入[name=quantity]”。每个（函数（）{
sum+=+$（this.val（）；
});
控制台日志（“数量：+qty+”|总和：+Sum）
如果（总和>数量）{
$（此）.before（'总数量不应超过'+数量+''）；
}
});
//提交时呼叫
函数mySubmitFunction（e）{
//e、 预防默认值（）；
var结果=真；
$（“tr[data value='original']）。每个（函数（）{
var name=$（this.find（'td:eq（0）'））.text（）；
变量数量=$（this）.find（'td:eq（2）'）.text（）；
var new_name=name.replace（/\s/g'）；
var总和=0；
$（“+new_name+“input[name=quantity]”）。每个（函数（）{
sum+=+$（this.val（）；
});
控制台日志（“名称：+Name+”总和：+Sum+“| |数量：+Qty”）
如果（总和>数量）{
//做点什么
警报（“请检查“+名称”的数量是否更大）
结果=假；
}
});
返回结果；
}

第一部分
原始数量：
50
第一部分
+
第二部分
原始数量：
100
第二部分
+

您尝试了什么？我看不到有人试图做你在代码中描述的事情。另外，请注意，客户端进行的任何验证都不是真正的验证。如果数据完整性对您很重要（大多数情况下都应该如此），那么您还应该在服务器端验证输入。客户端验证仅适用于UX@LaurentS.Thanks谢谢你的建议。我试过：$（文档）。在（“更改”、“输入”上，函数（）{var sum=0；$（“输入”）。每个（函数（）{sum+=+$（this.val（）；}）；如果（sum>qty）{$（this.before（'总数量不应超过'+qty+''；}）；但是没有达到预期效果。有什么帮助吗？您需要对照原始行检查克隆行的总数？谢谢您的回复。初始行是基于数据库表行数生成的。初始行数量值也会从数据库中显示。因此每次行计数都会不同。它会影响你的代码吗？这只是一个演示代码，根据你提供的html。。？什么东西在这里不起作用？您不需要额外的行来显示数量？我的意思是，初始行（现在是2）是根据数据库中可用的行动态生成的。有时它可能会达到15行。该代码对此是否灵活？我看到手动添加的类（Part1、Part2、Part1_original、Part2_original），这就是我问的原因。是的。。在你那边进行测试，如果对你不起作用，请告诉我。或者，如果您需要更改表的结构等。

$(function() {
  $('#exampleTbl').delegate('button.addRow', 'click', function() {
    var row = $(this).closest('tr'); // get the parent row of the clicked button
    var html = $(this).closest('tr').clone();
    $(html).insertAfter(row); // insert content
    
    let btn = $('<a href="javascript: void(0)" title="Click to remove">Remove</a>');
    btn.click(function () {
      $(html).remove(); // Remove row on click
    })
    
    $(html).find('.addRow').replaceWith(btn);
  });
});