Superset表格图表：如何基于列值设置整行背景色及转义单引号

你原方法失效的核心原因是Superset会对输出的HTML做安全过滤，自动移除onload这类事件属性，导致嵌入的JS代码无法执行。以下是两种可行解决方案：

方案1：使用Superset内置条件样式（推荐） #

若你的Superset版本为2.x及以上，大多支持该功能：

• 进入图表编辑页，切换到「样式」标签
• 找到「行条件格式」选项，添加规则：
  • 选择判断列：adate
  • 设置条件：小于当前时间
  • 配置样式：将整行背景色设为红色

方案2：自定义JavaScript脚本（适合复杂逻辑场景） #

若内置样式无法满足需求，可通过自定义脚本实现：

• 进入仪表板编辑模式，添加「文本」组件
• 切换到「HTML」编辑模式，插入以下脚本（需根据实际表格结构调整选择器）：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 匹配Superset表格容器，可根据页面实际元素调整选择器
  const tableContainer = document.querySelector('.table-container');
  if (!tableContainer) return;
  
  const rows = tableContainer.querySelectorAll('tbody tr');
  rows.forEach(row => {
    // 假设adate是表格第3列（索引从0开始，需自行核对调整）
    const dateCell = row.cells[2];
    if (!dateCell) return;
    
    const rowDate = new Date(dateCell.textContent.trim());
    if (rowDate < new Date()) {
      row.style.backgroundColor = '#ffcccc'; // 可自行修改颜色值
    }
  });
});
</script>

• 保存仪表板后刷新页面，脚本会自动执行并修改行背景色

在SQL语法中，转义单引号的标准方式是连续写两个单引号。

例如你要在concat生成的字符串中包含style.background='red'，对应的SQL写法如下：

case 
when adate::timestamp < now()
then concat('<img onload="this.parentNode.parentNode.style.background=''red'';" src="url_of_a-small_icon">&nbsp;',name)
else name
end

这里的''red''会被SQL解析为'red'，最终输出的HTML会符合预期格式。

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