如何使用 JavaScript 动态填充表格行中关联文本框的值-html教程-PHP中文网

本文讲解如何通过事件委托解决动态添加的 select 元素无法触发 onchange 事件的问题，利用类选择器和 closest() 定位对应行，实现多行数据联动填充。

本文讲解如何通过事件委托解决动态添加的 select 元素无法触发 onchange 事件的问题，利用类选择器和 closest() 定位对应行，实现多行数据联动填充。

在构建动态表单（如原材料采购单）时，常需为每行“原料选择”联动填充单价、总数量、成本等字段。若仅对初始 DOM 元素绑定事件（如 $('#raw_material').change(...)），则后续通过 JavaScript 动态插入的新

✅ 正确做法：事件委托 + 类选择器 + 行级定位

核心思路有三点：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

避免重复 ID：将 id 改为 class（如 class="raw_material"），确保每个 select 具备统一可监听的标识；
使用事件委托：通过 $(document).on('change', '.raw_material', ...) 监听所有当前及未来添加的 .raw_material 元素；
精准定位目标输入框：利用 $(this).closest('tr') 获取当前 select 所在行，再用 .find() 在该行内查找对应 .total_quantity、.unit_price 等类名输入框，实现“本行专属填充”。

? 示例代码（精简可运行版）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="addRow">+ 添加原料行</button>

$(document).ready(function() {
  // 模拟原始选项数据（实际应来自 fetch_options.php）
  const rawMaterials = [
    { code: "RM001", material_name: "不锈钢卷材" },
    { code: "RM002", material_name: "铝合金型材" }
  ];

  // 初始化首行 select
  const $select = $('.raw_material').first();
  rawMaterials.forEach(opt => {
    $select.append(`<option value="${opt.code}">${opt.material_name}</option>`);
  });

  // 添加新行
  $('#addRow').click(function() {
    const newRowHtml = `
      <tr>
<td><select class="form-control raw_material" name="raw_material[]">${$select.html()}</select></td>
        <td><input class="form-control quantity" placeholder="批次数量" type="number" name="quantity[]"></td>
        <td><input class="form-control total_cost_price" type="text" name="total_cost_price[]"></td>
        <td><input class="form-control total_quantity" type="text" name="total_quantity[]"></td>
        <td><input class="form-control unit_price" type="text" name="unit_price[]"></td>
      </tr>`;
    $('#tblMaterial').append(newRowHtml);
  });

  // ✅ 关键：事件委托监听所有 .raw_material（含动态生成）
  $(document).on('change', '.raw_material', function() {
    const selectedCode = $(this).val();
    if (!selectedCode) return;

    // 实际项目中此处调用 AJAX 获取数据
    // $.get('fetch_data.php', { id: selectedCode }, function(res) {
    //   populateFormFields(JSON.parse(res), $(this));
    // }.bind(this));

    // 演示用模拟数据（请替换为真实接口）
    const mockData = {
      RM001: { unit_price: 85.5, total_quantity: 200, total_cost_price: 17100 },
      RM002: { unit_price: 42.8, total_quantity: 500, total_cost_price: 21400 }
    };

    const data = mockData[selectedCode] || {};
    populateFormFields(data, $(this));
  });

  // 填充当前行的输入框
  function populateFormFields(data, $selectEl) {
    const $row = $selectEl.closest('tr');
    $row.find('.unit_price').val(data.unit_price || '');
    $row.find('.total_quantity').val(data.total_quantity || '');
    $row.find('.total_cost_price').val(data.total_cost_price || '');
  }
});

⚠️ 注意事项与最佳实践

严禁重复 ID：HTML 中 id 必须唯一，动态行务必改用 class；
AJAX 错误处理不可省略：生产环境需增加 error 回调，提示用户加载失败；
防抖优化（可选）：若选项极多或接口较慢，可在 change 事件中加入 setTimeout 防抖，避免频繁请求；
服务端安全校验：fetch_data.php 必须验证 id 参数合法性，防止 SQL 注入或越权访问；
兼容性考虑：jQuery 3.3+ 已足够覆盖主流浏览器；如需原生 JS，可用 document.addEventListener('change', e => { if (e.target.matches('.raw_material')) {...} }, true) 替代。

通过上述结构化改造，即可稳定支持任意数量的动态行数据联动，彻底解决“只有首行生效”的常见陷阱。