使用JavaScript在动态表格上进行验证

Question

function checkmatch()
{
               
   var a = document.getElementById('stock').value;
   var d = document.getElementById('edit1').value;
   var f=parseFloat(d)
   var e=parseFloat(a)
      if(f>=e)
      {
         alert("Matched");
         return true; 
      }
      else
      {
         alert("'Variation : '"+c)
         return false;
      }
               
}

<table>
<tr>
    <th>Item Code</th>
    <th>Item Description</th>
	  <th>Quantity in Stock</th>
    <th>Batch Quantity</th>
    <th>Added Quantity</th>
</tr>
    <tr>
        <td><input type='text' name='iname[]' value='item001'></td>
        <td><input type='text' name='iname[]' value='itemdesc001'></td>
        <td><input type='text' name='stock[]' id='stock' value='-25'></td>
        <td><input type='text' name='edit[]' id='edit' value='24'></td>
        <td><input type='text' name='edit1[]' id='edit1' value='24'></td>
    </tr>
    <tr>
        <td><input type='text' name='iname[]' value='item002'></td>
        <td><input type='text' name='iname[]' value='itemdesc002'></td>
        <td><input type='text' name='stock[]' id='stock' value='24'></td>
        <td><input type='text' name='edit[]' id='edit' value='24'></td>
        <td><input type='text' name='edit1[]' id='edit1' value='24'></td>
    </tr>
    <tr>
        <td><input type='text' name='iname[]' value='item003'></td>
        <td><input type='text' name='iname[]' value='itemdesc003'></td>
        <td><input type='text' name='stock[]' id='stock' value='165'></td>
        <td><input type='text' name='edit[]' id='edit' value='4'></td>
        <td><input type='text' name='edit1[]' id='edit1' value='10'></td>
    </tr>
</table>

我正在从数据库中获取值，并使用php以表格格式显示它。

我想验证两个字段，即库存数量和添加库存，其中库存数量应大于或等于添加数量。

我在验证这些动态字段时遇到问题。

我需要验证ID为stock []的文本框并进行编辑

Answer 1

1. 将ID更改为class
2. 查看提交字段，并在出现错误时停止提交
3. 添加事件处理程序以处理您要用户更新的字段中的所有输入

function checkmatch(fld) {
  var row = fld.closest("tr")
  var stock = +row.querySelector(".stock").value;
  var added = +row.querySelector(".edit1").value;
  row.querySelector(".res").innerHTML = added <= stock ? ' Matched': '<b class="vari">Variation: ' + Math.abs(stock - added)+'</b>';
}
window.addEventListener("load", function() {
  document.getElementById("table1").addEventListener("input", function(e) {
    var obj = e.target;
    if (obj.classList.contains("edit1")) checkmatch(obj)
  })
  document.getElementById("test").addEventListener("submit",function(e) {
    document.querySelectorAll(".edit1").forEach(function(fld) {checkmatch(fld)})
    var variation = document.getElementById("table1").querySelector(".vari")
    if (variation) {
      e.preventDefault()
      alert("Please fix the variation in " + variation.closest("tr").querySelector("td").firstElementChild.value);
      var inp = variation.closest("td").querySelector("input")
      inp.select();
      inp.focus();
    }  
  })
  // when loading
  document.querySelectorAll(".edit1").forEach(function(fld) {checkmatch(fld)})
  
})

<form id="test">
  <table id="table1">
    <tr>
      <th>Item Code</th>
      <th>Item Description</th>
      <th>Quantity in Stock</th>
      <th>Batch Quantity</th>
      <th>Added Quantity</th>
    </tr>
    <tr>
      <td><input type='text' name='iname[]' value='item001'></td>
      <td><input type='text' name='iname[]' value='itemdesc001'></td>
      <td><input type='text' name='stock[]' class='stock' value='-25'></td>
      <td><input type='text' name='edit[]' class='edit' value='24'></td>
      <td><input type='text' name='edit1[]' class='edit1' value='24'><span class="res"></span></td>
    </tr>
    <tr>
      <td><input type='text' name='iname[]' value='item002'></td>
      <td><input type='text' name='iname[]' value='itemdesc002'></td>
      <td><input type='text' name='stock[]' class='stock' value='24'></td>
      <td><input type='text' name='edit[]' class='edit' value='24'></td>
      <td><input type='text' name='edit1[]' class='edit1' value='24'><span class="res"></span></td>
    </tr>
    <tr>
      <td><input type='text' name='iname[]' value='item003'></td>
      <td><input type='text' name='iname[]' value='itemdesc003'></td>
      <td><input type='text' name='stock[]' class='stock' value='165'></td>
      <td><input type='text' name='edit[]' class='edit' value='4'></td>
      <td><input type='text' name='edit1[]' class='edit1' value='10'><span class="res"></span></td>
    </tr>
  </table>
  <input type="submit" />
</form>