Блог

Я новичок в программировании и все еще учусь. Я просто хочу спросить, как выполнить проверку кода для более чем одного ввода? У меня есть элемент таблицы данных. Я хочу запустить ввод проверки для каждой строки.

Мой приведенный ниже код выполняется только для первой строки и не может выполняться во второй строке.

 <tr>
  <td><input id="stock" type="number" name="stock" value="<?php echo $row->stock; ?>" readonly></td>
  <td><input id="qty" onInput="calc();" type="number" name="qty"></td>
</tr>
<script type="text/javascript">
    function calc(){
        var stock = document.getElementById("stock").value;
        var qty = document.getElementById("qty").value;

        if(qty > stock){
            alert("Qty More Than Stock!");
            document.getElementById("qty").value = 1;
        }

    }
    </script>
 

Вы можете использовать querySelectorAll с data-attribute параметром для выбора всех inputs , затем forEach его и проверить значение, например:

 document.querySelectorAll('input[data-check]').forEach(el => {
  el.addEventListener('change', () => {
    if (parseInt(el.value) > parseInt(el.parentElement.previousElementSibling.children[0].value)) {
      alert("Qty More Than Stock!");
      el.value = 0;
    }
  });
}); 

 <table>
  <tr>
    <td>Stock</td>
    <td>Qty</td>
  </tr>
  <tr>
    <td><input id="stock" type="number" name="stock" value="2" readonly></td>
    <td><input data-check type="number" name="qty"></td>
  </tr>
  <tr>
    <td><input id="stock" type="number" name="stock" value="3" readonly></td>
    <td><input data-check type="number" name="qty"></td>
  </tr>
</table> 

пс. Не забывайте всегда использовать структуру, подобную моему примеру, иначе мой код, вероятно, не будет work.
in на самом деле el.parentElement.previousElementSibling.children[0].value это похоже на то, что говорят: элемент — родитель элемента (td) — предыдущий элемент (другой td) — первые дочерние элементы элемента previus (вход).

Другой вариант-использовать другой атрибут данных для выбора стоимости акций, например:

 document.querySelectorAll('input[data-check]').forEach(el => {
  el.addEventListener('change', () => {
    let stock = document.querySelector('input[data-index="' el.dataset.stock '"]');
    if (parseInt(el.value) > parseInt(stock.value)) {
      alert("Qty More Than Stock!");
      el.value = 0;
    }
  });
}); 

 <table>
  <tr>
    <td>Stock</td>
    <td>Qty</td>
  </tr>
  <tr>
    <td><input data-index='0' type="number" name="stock" value="2" readonly></td>
    <td><input data-check data-stock='0' type="number" name="qty"></td>
  </tr>
  <tr>
    <td><input data-index='1' type="number" name="stock" value="25" readonly></td>
    <td><input data-check data-stock='1' type="number" name="qty"></td>
  </tr>
</table>