如何编写通用getValue(t)函数适配不同表格行的数值填充需求

解决方案 #

你可以通过合并配置映射+动态获取当前行的方式实现通用函数，不需要为每行单独写处理逻辑，后续新增行也可以直接复用该函数。

步骤1：合并版本配置映射

因为不同行的版本号是唯一不冲突的，直接将两个配置合并为一个全局映射即可：

// 合并后的全局版本映射，后续新增版本直接在这里加即可
const versionConfig = {
  '0.1.22': [0,2,3,4,5,6,7,8,9,10],
  '0.1.23': [1,2,3,4,5,6,7,8,9,10],
  '0.1.29': [1,'',3,'',5,'',7,'',9,''],
  '0.1.30': [1,1,3,4,5,6,7,8,9,10],
  '0.1.31': [2,2,3,4,5,6,7,8,9,10],
  '0.1.32': [3,3,3,'',5,'',7,'',9,'']
};

步骤2：编写通用getValue函数

不需要写死行ID，通过传入的select元素自动定位所属的行：

function getValue(t) {
  // 自动获取当前select所在的tr行
  const currentRow = t.parentElement.parentElement;
  // 获取当前行所有td单元格
  const cells = currentRow.querySelectorAll('td');
  // 从全局映射取对应版本的数值数组，赋值到对应td
  versionConfig[t.value]?.forEach((value, idx) => {
    cells[idx + 3].innerText = value;
  });
}

步骤3：统一HTML的触发事件

把第二行select的onchange属性从getValue1(this)改成getValue(this)即可，所有行的select都可以用同一个触发函数：

<select id="select2" onchange="getValue(this)"><option disabled>Chart Version</option><option value="0.1.30" selected>1.0.30</option><option value="0.1.31">1.0.31</option><option value="0.1.32">1.0.32</option></select>

拓展说明

如果后续需要新增表格行，只需要做两步即可：

1. 在versionConfig里新增对应版本号的数值数组
2. 新行的select直接绑定onchange="getValue(this)"，不需要修改函数逻辑

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