如何根据用户输入动态更新表格行

Question

我正在尝试创建一个动态 HTML 表，该表根据用户输入更新其行。该表应显示项目列表及其相应的价格。

问题： 当用户单击“添加项目”按钮时，会添加新行，但我想：

1. 验证用户输入（例如，检查商品名称是否不为空且价格是否为正数）。
2. 当用户更改输入字段时动态更新表格行。
3. 删除重复的项目名称。

• 在输入字段上使用

  change

  事件，不会更新表格行。
• 在输入字段上使用

  blur

  事件，但不验证输入

任何指导或代码片段将不胜感激！

$(document).ready(function() {
  $('#add-item').click(function() {
    // Get user input
    var itemName = $('#item-name').val();
    var itemPrice = $('#item-price').val();

    // Create new table row
    var newRow = $('<tr>');
    newRow.append($('<td>').text(itemName));
    newRow.append($('<td>').text(itemPrice));

    // Add row to table body
    $('#item-table tbody').append(newRow);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="item-table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows will be generated dynamically -->
  </tbody>
</table>

<input type="text" id="item-name" placeholder="Enter item name">
<input type="number" id="item-price" placeholder="Enter item price">
<button id="add-item">Add Item</button>

Answer 1

以下是您问题的完整解决方案

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  input.error {
    border: 2px solid red;
  }
</style>
<input type="text" id="item-name" placeholder="Enter item name" />
<input type="number" id="item-price" placeholder="Enter item price" />
<button id="add-item">Add Item</button>

<table id="item-table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  $(document).ready(function () {
    $("#add-item").click(function () {
      var itemName = $("#item-name").val().trim();
      var itemPrice = $("#item-price").val();

      if (!validateInputs(itemName, itemPrice)) {
        return;
      }

      if (isDuplicate(itemName)) {
        alert("Item already exists!");
        return;
      }
      var newRow = $("<tr>");
      newRow.append($("<td>").text(itemName));
      newRow.append($("<td>").text(itemPrice));

      $("#item-table tbody").append(newRow);
      $("#item-name").val("");
      $("#item-price").val("");
    });
    function validateInputs(itemName, itemPrice) {
      var isValid = true;
      $(".error").removeClass("error");
      if (!itemName) {
        $("#item-name").addClass("error");
        isValid = false;
      }

      if (!itemPrice || itemPrice <= 0) {
        $("#item-price").addClass("error");
        isValid = false;
      }

      return isValid;
    }
    function isDuplicate(itemName) {
      let exists = false;
      $("#item-table tbody tr").each(function () {
        if ($(this).find("td").first().text() === itemName) {
          exists = true;
        }
      });
      return exists;
    }
    $("#item-name, #item-price").on("input", function () {
      var itemName = $("#item-name").val().trim();
      var itemPrice = $("#item-price").val();
      if (itemName && itemPrice > 0) {
        $("#item-table tbody tr").each(function () {
          if ($(this).find("td").first().text() === itemName) {
            $(this).find("td").last().text(itemPrice);
          }
        });
      }
    });
  });
</script>