如何在DT::datatable中为不同选中顺序的行设置不同颜色？

我现在有一段Shiny中DT表格的代码：

output$tableId <- 
   DT::renderDataTable({DT::datatable(..., selection = "multiple")})

希望实现选中行的背景色根据选中顺序（第一行、第二行等）区分。我推测可以结合length(input$tableId_rows_selected)和修改CSS来实现：

.table.dataTable tbody td.active, .table.dataTable tbody tr.active td {
   background-color: #007bff;
   color: white;
}

但我对CSS、HTML和JavaScript了解有限，没法完成这个功能。

2022-02-14 更新需求 #

看了初始回答后，我调整了需求，理想逻辑如下：

1. 预设m种唯一颜色，此前已选中n < m行；
2. 第n+1行被选中后，设置为第n+1种颜色，直到取消选中；
3. 选中行数达到m时，要么禁止继续选中；要么选中第m+1行时，将其设为第一种颜色，并取消原使用该颜色的行的选中状态，循环往复。

另外还有两个要求：

• 应用将通过iframe运行，底层数据有1000万至1亿条，因此解决方案需要支持DT::renderDataTable({...}, server = TRUE)；
• 要兼容DT::datatable(..., selection = list(mode = "multiple", selected = 1:3, target = "row"))选项。

我尝试结合现有回答和相关工具实现，但没成功。

以下是满足需求的实现方案，兼容server = TRUE和预设选中行的场景：

1. 定义颜色集与核心逻辑 #

通过DT的callback参数注入JavaScript代码，跟踪选中顺序、管理颜色分配，并处理选中限制/循环逻辑，同时配合自定义CSS覆盖默认选中样式。

完整代码示例 #

library(shiny)
library(DT)

ui <- fluidPage(
  # 自定义CSS：清除默认选中样式，定义m种颜色类
  tags$style(HTML("
    /* 覆盖DT默认选中样式 */
    .table.dataTable tbody tr.active td {
      background-color: transparent !important;
      color: inherit !important;
    }
    /* 定义5种颜色类，可按需增减修改颜色值 */
    .selected-row-1 td { background-color: #ffcccc !important; color: #333 !important; }
    .selected-row-2 td { background-color: #ccffcc !important; color: #333 !important; }
    .selected-row-3 td { background-color: #ccccff !important; color: #333 !important; }
    .selected-row-4 td { background-color: #ffebcc !important; color: #333 !important; }
    .selected-row-5 td { background-color: #ccf0f5 !important; color: #333 !important; }
  ")),
  
  DTOutput("tableId")
)

server <- function(input, output, session) {
  # 模拟大数据集，实际替换为你的数据源
  df <- data.frame(
    ID = 1:100,
    Value = rnorm(100)
  )
  
  output$tableId <- DT::renderDataTable({
    DT::datatable(
      df,
      selection = list(
        mode = "multiple", 
        selected = 1:3,  # 预设初始选中行
        target = "row"
      ),
      server = TRUE,
      callback = JS('
        // 配置：设置颜色总数m，需与CSS中颜色类数量一致
        const m = 5;
        // 存储选中行与颜色序号的映射（行索引→颜色号）
        let selectedOrder = new Map();
        // 存储颜色序号与行索引的映射（颜色号→行索引），用于循环替换
        let colorToRow = new Map();
        
        // 初始化预设选中行的颜色分配
        table.on("init", function() {
          const initialSelected = table.rows({selected:true}).indexes();
          initialSelected.each(function(idx, i) {
            const colorNum = i + 1;
            selectedOrder.set(idx, colorNum);
            colorToRow.set(colorNum, idx);
            table.row(idx).nodes().to$().addClass(`selected-row-${colorNum}`);
          });
        });
        
        // 监听行选中事件
        table.on("select", function(e, dt, type, indexes) {
          if(type !== "row") return;
          
          indexes.forEach(function(idx) {
            if(selectedOrder.has(idx)) return; // 已选中的行跳过
            
            let colorNum;
            if(selectedOrder.size < m) {
              // 还有剩余颜色，按顺序分配
              colorNum = selectedOrder.size + 1;
            } else {
              // 颜色用尽，循环替换：取第一个颜色，取消对应行的选中
              colorNum = 1;
              const oldIdx = colorToRow.get(colorNum);
              selectedOrder.delete(oldIdx);
              table.row(oldIdx).deselect();
              table.row(oldIdx).nodes().to$().removeClass(`selected-row-${colorNum}`);
            }
            
            // 更新映射并添加颜色类
            selectedOrder.set(idx, colorNum);
            colorToRow.set(colorNum, idx);
            table.row(idx).nodes().to$().addClass(`selected-row-${colorNum}`);
          });
        });
        
        // 监听行取消选中事件
        table.on("deselect", function(e, dt, type, indexes) {
          if(type !== "row") return;
          
          indexes.forEach(function(idx) {
            const colorNum = selectedOrder.get(idx);
            if(colorNum) {
              selectedOrder.delete(idx);
              colorToRow.delete(colorNum);
              table.row(idx).nodes().to$().removeClass(`selected-row-${colorNum}`);
              
              // 可选：取消选中后重新排序颜色，保持序号连续（取消注释启用）
              // const remaining = Array.from(selectedOrder.entries()).sort((a,b) => a[1]-b[1]);
              // selectedOrder.clear();
              // colorToRow.clear();
              // remaining.forEach(([rowIdx, oldColor], i) => {
              //   const newColor = i + 1;
              //   selectedOrder.set(rowIdx, newColor);
              //   colorToRow.set(newColor, rowIdx);
              //   table.row(rowIdx).nodes().to$().removeClass(`selected-row-${oldColor}`).addClass(`selected-row-${newColor}`);
              // });
            }
          });
        });
      ')
    )
  })
}

shinyApp(ui, server)

2. 关键说明 #

• 颜色配置：在CSS中定义m个.selected-row-*类，JavaScript中const m = 5需与颜色类数量保持一致，可按需修改颜色值；
• server = TRUE兼容：使用DT原生事件监听（init/select/deselect）实现，不依赖Shiny输入同步延迟，适配服务端渲染模式；
• 预设选中行处理：在init事件中初始化预设选中行的颜色分配，保证页面加载后预设行即有对应颜色；
• 两种逻辑切换：
  • 循环替换：默认逻辑，选中行数达m时，新行使用第一个颜色并取消原对应行选中；
  • 禁止继续选中：将select事件中else分支替换为return;即可；
• 颜色序号调整：代码中注释了取消选中后重新排序颜色的逻辑，启用后可保持颜色序号连续，不需要则保持注释。

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