R Shiny中实现编辑后单元格变色且不被选中高亮覆盖

要实现编辑单元格后变色，且选中行时该颜色不被覆盖，核心是提升已编辑单元格背景色的CSS优先级，让它比行选中的高亮样式优先级更高。以下是修改后的完整代码：

library(shiny)
library(shinyjs)
library(DT)

# 修改JS函数：给单元格添加自定义类，而非直接设置CSS
js <- HTML(
  "function markEditedCell(i, j){\n    var selector = '#dtable tr:nth-child(' + i + ') td:nth-child(' + j + ')';\n    $(selector).addClass('edited-cell');\n  }"
)

markEditedCell <- function(i, j){
  sprintf("markEditedCell(%d, %d)", i, j)
}

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$script(js),
    # 添加自定义CSS，确保已编辑单元格在选中行时仍保留颜色
    tags$style(HTML("
      /* 正常状态下已编辑单元格的样式 */
      .edited-cell {
        background-color: yellow !important;
      }
      /* 选中行中的已编辑单元格，强制保留颜色 */
      table.dataTable tr.selected td.edited-cell {
        background-color: yellow !important;
      }
    "))
  ),
  br(),
  DTOutput("dtable")
)

dat <- iris[1:5, ]

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(dat, editable = TRUE, selection = "multiple") # 启用行选择
  }, server = FALSE)
  
  observeEvent(input[["dtable_cell_edit"]], {
    info <- input[["dtable_cell_edit"]]
    i <- info[["row"]]
    j <- info[["col"]]
    runjs(markEditedCell(i, j+1)) # DT的列索引从1开始，编辑事件返回的col是0基，所以+1
  })
  
}

shinyApp(ui, server)

关键修改说明： #

• 用CSS类替代直接设置行内样式：原来的代码直接给单元格设置background-color，行选中的样式优先级更高会覆盖它。改为给单元格添加edited-cell类，通过CSS规则控制样式。
• 提升CSS优先级：使用!important或者更具体的选择器（table.dataTable tr.selected td.edited-cell），确保已编辑单元格的背景色在任何状态下（包括行选中）都能生效。
• 保留行选择功能：在datatable()中显式设置selection = "multiple"（或"single"）启用行选择，同时不影响已编辑单元格的颜色。

这个方案完美解决了动态生成的已编辑单元格颜色被行选中高亮覆盖的问题，符合你的需求。

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