能否为Org表格设置条件格式并自定义单元格显示？

核心需求 #

• 为Org表格添加条件格式（如热图效果）
• 保留单元格原始数值的前提下，按规则修改显示内容（例如将秒数转换为分钟/小时/天，或把执行次数转为"Daily"/"Yearly"这类描述）

原始表格（Org格式） #

首行代表任务每年执行的次数，首列代表任务执行耗时（单位：秒）：

|-------+------------+-----------+----------+---------+---------+-------|
|       |      18250 |      1825 |      365 |      52 |      12 |     1 |
|-------+------------+-----------+----------+---------+---------+-------|
|     1 |      18250 |      1825 |      365 |      52 |      12 |     1 |
|     5 |      91250 |      9125 |     1825 |     260 |      60 |     5 |
|    30 |     547500 |     54750 |    10950 |    1560 |     360 |    30 |
|    60 |    1095000 |    109500 |    21900 |    3120 |     720 |    60 |
|   300 |    5475000 |    547500 |   109500 |   15600 |    3600 |   300 |
|  1800 |   32850000 |   3285000 |   657000 |   93600 |   21600 |  1800 |
|  3600 |   65700000 |   6570000 |  1314000 |  187200 |   43200 |  3600 |
| 21600 |  394200000 |  39420000 |  7884000 | 1123200 |  259200 | 21600 |
| 86400 | 1576800000 | 157680000 | 31536000 | 4492800 | 1036800 | 86400 |
|-------+------------+-----------+----------+---------+---------+-------|
#+TBLFM: $2=$1*@1$2::$3=$1*@1$3::$4=$1*@1$4::$5=$1*@1$5::$6=$1*@1$6::$7=$1*@1$7

显示规则示例 #

需要将部分数值转换为更易读的显示内容，示例如下：

|-------+-------+---------|
| Cell  | Value | Display |
|-------+-------+---------|
| @1$4  |   365 | Daily   |
| @1$7  |     1 | Yearly  |
| @3$6  |    60 | 1 m     |
| @6$6  |  3600 | 1 h     |
| @10$1 | 86400 | 1 d     |
|-------+-------+---------|

理想效果：首行以下所有行按规则生成显示内容（如59<x<3600时，除以60并添加" m"），同时为表格添加热图效果。无需通过Org-mode本身完成格式化，表格将导出为HTML，优先使用HTML结合CDN提供的JS代码实现。

实现方案（HTML导出后用JS处理） #

1. 自定义显示内容处理 #

导出HTML后，添加以下原生JS代码即可实现数值到易读文本的转换：

document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('table');
  const cells = table.querySelectorAll('td');

  cells.forEach(cell => {
    const rawValue = cell.textContent.trim();
    const value = parseInt(rawValue);
    if (isNaN(value)) return;

    // 首行（执行次数）特殊映射
    const isFirstDataRow = cell.parentElement === table.querySelector('tr:nth-child(2)');
    if (isFirstDataRow) {
      const mappings = {
        365: 'Daily',
        1: 'Yearly',
        52: 'Weekly',
        12: 'Monthly',
        1825: '5x Daily',
        18250: '50x Daily'
      };
      cell.textContent = mappings[value] || rawValue;
      return;
    }

    // 首列（耗时）单位转换
    const isFirstColumn = cell.cellIndex === 0;
    if (isFirstColumn) {
      let display = rawValue;
      if (value === 86400) display = '1 d';
      else if (value === 3600) display = '1 h';
      else if (value === 1800) display = '30 m';
      else if (value === 300) display = '5 m';
      else if (value === 60) display = '1 m';
      else if (value === 30) display = '30 s';
      else if (value === 5) display = '5 s';
      else if (value === 1) display = '1 s';
      cell.textContent = display;
      return;
    }

    // 其他单元格通用转换规则
    let display = rawValue;
    if (value > 59 && value < 3600) display = `${Math.floor(value / 60)} m`;
    else if (value >= 3600 && value < 86400) display = `${Math.floor(value / 3600)} h`;
    else if (value >= 86400) display = `${Math.floor(value / 86400)} d`;
    else if (value === 365) display = 'Daily';
    else if (value === 1) display = 'Yearly';
    cell.textContent = display;
  });
});

2. 热图效果实现 #

通过原生JS根据单元格数值动态设置背景色，实现热图效果：

document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('table');
  const cells = table.querySelectorAll('td');
  const values = [];

  // 收集所有有效数值
  cells.forEach(cell => {
    const val = parseInt(cell.textContent.trim());
    if (!isNaN(val)) values.push(val);
  });

  if (values.length === 0) return;
  const minVal = Math.min(...values);
  const maxVal = Math.max(...values);

  // 为单元格分配热图颜色
  cells.forEach(cell => {
    const val = parseInt(cell.textContent.trim());
    if (isNaN(val)) return;

    // 计算颜色比例（从浅红到深红）
    const ratio = (val - minVal) / (maxVal - minVal);
    const red = Math.floor(200 + ratio * 55);
    const green = Math.floor(255 - ratio * 200);
    const blue = Math.floor(255 - ratio * 200);
    
    cell.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
    cell.style.color = ratio > 0.5 ? 'white' : 'black';
    cell.style.padding = '4px 8px';
  });
});

将上述代码添加到导出的HTML页面中，即可同时实现自定义显示与热图效果。

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