如何使用JavaScript根据表头选中值批量修改表格所有行的EDW列值

实现代码 #

你可以直接用原生JavaScript实现，无需引入额外依赖，代码如下：

document.addEventListener('DOMContentLoaded', function () {
  // 获取表头EDW列的下拉选择框
  const headerEdwSelect = document.querySelector('#example1 thead select.edw');
  // 监听下拉框值变化事件
  headerEdwSelect.addEventListener('change', function () {
    // 拿到当前选中的EDW值
    const targetVal = this.value;
    // 选中表格tbody中所有EDW列的输入框
    const rowEdwInputs = document.querySelectorAll('#example1 tbody input.edw');
    // 遍历批量赋值
    rowEdwInputs.forEach(input => {
      input.value = targetVal;
      // 如果EDW输入框有绑定联动计算逻辑，可放开下面注释触发计算
      // input.dispatchEvent(new Event('input'));
    });
  });
});

如果你的项目已经引入了jQuery，可以用更简洁的写法：

$(function () {
  $('#example1 thead select.edw').on('change', function () {
    const targetVal = $(this).val();
    $('#example1 tbody input.edw').val(targetVal);
    // 如需触发联动计算放开下面注释
    // $('#example1 tbody input.edw').trigger('input');
  });
});

注意事项 #

• 选择器特意区分了thead和tbody，避免误操作表头的下拉框元素
• 如果你的EDW输入框本身有值变化后的联动计算逻辑（比如自动计算净收入等），打开对应注释的触发事件代码即可自动触发原有计算逻辑，无需额外适配

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