JavaScript遍历动态HTML表格行，EndDate含值时禁用该行编辑

实现思路 #

• 不要使用eval操作动态变量，直接通过document.getElementById获取对应行的EndDate字段元素
• 先判断EndDate字段的值是否有效（非空、排除空白字符）
• 提前定义好每行需要禁用的可编辑字段的ID后缀集合，匹配行前缀后批量设置禁用状态

完整实现代码 #

// 定义每行需要禁用的字段ID后缀，可根据实际业务场景增删
const DISABLED_FIELD_SUFFIXES = [
  'LineItemCode',
  'LineItemCode_ref_ref',
  'ec_type'
]

const rowData = document.querySelector("#RequestLinesGrid_RowIDs");
const rows = rowData.value.split(',');

rows.forEach(rowPrefix => {
  // 获取当前行的EndDate元素
  const endDateEl = document.getElementById(`${rowPrefix}_EndDate`);
  if (!endDateEl) return; // 未匹配到元素直接跳过当前行
  // 去除首尾空白后判断是否存在有效日期值
  const endDateVal = endDateEl.value.trim();
  if (endDateVal) {
    // 存在日期值，遍历禁用所有对应可编辑字段
    DISABLED_FIELD_SUFFIXES.forEach(suffix => {
      // 同时适配普通行前缀和p开头的行前缀（如pr0_xxx格式）
      [rowPrefix, `p${rowPrefix}`].forEach(prefix => {
        const fieldEl = document.getElementById(`${prefix}_${suffix}`);
        if (fieldEl) {
          fieldEl.disabled = true;
        }
      })
    })
  }
})

如果EndDate是第三方封装的日期组件，可根据组件API调整取值逻辑，替换直接取input value的部分即可。

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