如何用JavaScript在Oracle APEX交互式网格中按列值更改行背景色

问题根源 #

你的代码存在两个核心问题：

1. 字符串比较错误：直接用文本内容（字符串）做数值比较，比如"100" < "30"会返回true（字符串按字符ASCII码排序），导致逻辑判断失效。
2. 未限定网格范围：全局选择器可能影响页面其他元素，且APEX刷新后DOM结构变化可能导致选择器失效。

方案1：修正JavaScript代码 #

1. 确保动态动作事件正确：选择交互式网格 - 刷新后事件，目标为你的交互式网格，动作选执行JavaScript代码。
2. 替换为以下修正代码（注意替换YOUR_IG_STATIC_ID为你的交互式网格静态ID）：

$('#YOUR_IG_STATIC_ID td[headers="di"]').each(function() {
  // 提取并转换为数字，去除空白字符
  const days = parseInt($(this).text().trim(), 10);
  const row = $(this).closest('tr');
  
  // 重置行背景色
  row.find('td').css('background-color', '');
  
  // 非数字值跳过处理
  if (isNaN(days)) return;

  if (days < 30) {
    row.find('td').css('background-color', 'beige');
  } else if (days >= 30 && days < 60) {
    row.find('td').css('background-color', 'lightgreen');
  } else if (days >= 60 && days < 65) {
    row.find('td').css('background-color', 'lightblue');
  } else if (days >= 65) {
    row.find('td').css('background-color', 'pink');
  }
});

方案2：使用APEX内置行格式化（推荐，无需JS） #

这是更稳定的官方方案，避免JS维护问题：

• 编辑交互式网格，进入列属性页，找到DaysIn列。
• 展开高级选项，找到行格式化，选择基于列值的格式化。
• 点击添加格式化规则，依次设置：
  • 规则1：条件DaysIn < 30，样式设置背景色为beige
  • 规则2：条件DaysIn >=30 AND DaysIn <60，背景色lightgreen
  • 规则3：条件DaysIn >=60 AND DaysIn <65，背景色lightblue
  • 规则4：条件DaysIn >=65，背景色pink
• 保存后，APEX会自动处理行样式，无需额外代码。

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