shiny DT，更新值后更改单元格颜色，不被选择覆盖

Question

Basically what I want is a combination of these two answered posts

Change backgorund color of cell of data table while its value is edited in Rshiny

Shiny with DT Select rows, keep cell color

so I want the cell color to change after each edit on the client side, but when the rows with an edited cell are selected, I need the selection highlight to not overwrite the cell colorization, (so that it looks like this https://i.stack.imgur.com/K2Gjv.png ).

Difference between my problem and the one here Shiny with DT Select rows, keep cell color is that in my case the cell colors which need to keep their cell colors can not be hardocoded as they are selected by the client.

code which enables the cell colorization after cell edit (code from @StéphaneLaurent (I only changed a minor thing so that now selections are possible)), however here the selection "overwrites" the yellow cells. Is it even possible to achieve what I want?

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

js <- HTML(
  "function colorizeCell(i, j){
    var selector = '#dtable tr:nth-child(' + i + ') td:nth-child(' + j + ')';
    $(selector).css({'background-color': 'yellow'});
  }"
)

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

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$script(js)
  ),
  br(),
  DTOutput("dtable")
)

dat <- iris[1:5, ]

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(dat, editable = TRUE)
  }, server = FALSE)
  
  observeEvent(input[["dtable_cell_edit"]], {
    info <- input[["dtable_cell_edit"]]
    i <- info[["row"]]
    j <- info[["col"]]
    runjs(colorizeCell(i, j+1))
  })
  
}

shinyApp(ui, server)

Answer 1

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

css <- HTML(
  "table.dataTable tr.selected td.yellow {
     background-color: yellow !important
   }
   td.yellow {
     background-color: yellow !important
   }"
)

js <- HTML(
  "function colorizeCell(i, j){
    var selector = '#dtable tr:nth-child(' + i + ') td:nth-child(' + j + ')';
    $(selector).addClass('yellow');
  }"
)

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

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$style(css),
    tags$script(js)
  ),
  br(),
  DTOutput("dtable")
)

dat <- iris[1:5, ]

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(dat, editable = TRUE)
  }, server = FALSE)
  
  observeEvent(input[["dtable_cell_edit"]], {
    info <- input[["dtable_cell_edit"]]
    i <- info[["row"]]
    j <- info[["col"]]
    runjs(colorizeCell(i, j+1))
  })
  
}

shinyApp(ui, server)