如何基于用户输入动态更新HTML表格行

需求与问题 #

需要实现一个可动态更新的商品价格表格，核心要求：

• 点击「Add Item」按钮添加行，同时验证输入（商品名非空、价格为正数）
• 用户修改输入时可动态更新对应表格行
• 自动去重商品名（重复时更新价格而非新增行）

此前尝试input的change/blur事件，无法同时实现输入验证与表格动态更新。

完整实现代码 #

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="item-table" border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态生成行 -->
  </tbody>
</table>

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

JavaScript 部分

$(document).ready(function() {
  // 点击添加按钮逻辑
  $('#add-item').click(function() {
    const itemName = $.trim($('#item-name').val());
    const itemPrice = parseFloat($('#item-price').val());

    // 输入验证不通过则终止
    if (!validateInput(itemName, itemPrice)) return;

    // 检查商品是否已存在
    const existingRow = $(`#item-table tbody tr:has(td:first-child:contains("${itemName}"))`);
    if (existingRow.length > 0) {
      // 存在则更新价格
      existingRow.find('td:last-child').text(itemPrice.toFixed(2));
    } else {
      // 不存在则新增行
      const newRow = $('<tr>');
      newRow.append($('<td>').text(itemName));
      newRow.append($('<td>').text(itemPrice.toFixed(2)));
      $('#item-table tbody').append(newRow);
    }

    // 清空输入框
    $('#item-name').val('');
    $('#item-price').val('');
  });

  // 输入框实时验证（提升用户体验）
  $('#item-name, #item-price').on('input blur', function() {
    const itemName = $.trim($('#item-name').val());
    const itemPrice = parseFloat($('#item-price').val());
    validateInput(itemName, itemPrice, true);
  });

  // 统一输入验证函数
  function validateInput(name, price, isRealTime = false) {
    let isValid = true;
    if (!name) {
      !isRealTime && alert('商品名称不能为空！');
      isValid = false;
    }
    if (isNaN(price) || price <= 0) {
      !isRealTime && alert('请输入有效的正数价格！');
      isValid = false;
    }
    return isValid;
  }
});

关键功能说明 #

1. 输入验证：
   • 提取独立的validateInput函数，统一处理非空、正数验证逻辑
   • 绑定input+blur事件实现实时反馈，仅在点击添加按钮时弹出提示避免干扰输入
2. 去重与动态更新：
   • 通过:contains选择器快速定位已存在的商品行
   • 重复商品直接更新价格，非重复商品新增行
3. 细节优化：
   • 用$.trim()去除商品名前后空格，避免无效重复
   • 价格保留两位小数，格式更规范
   • 给价格输入框添加min/step属性，限制输入范围

内容的提问来源于stack exchange，提问作者Tanzeela Fatima