在行选择上更改 R Shiny 中数据表的背景颜色

Question

我正在尝试更改 R Shiny App 中选择时数据表的背景颜色。已经编写了相同的 CSS 代码，但无法覆盖现有的 CSS。实现它的任何解决方法。

这是我的一段代码：

用户界面

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

shinyUI(
dashboardPage (
dashboardHeader(title="Report"),
dashboardSidebar(sidebarMenu(menuItem("Table",tabName="Table"))),
dashboardBody(
tags$head(tags$style(HTML("

#DataTable tr.selected {background-color:cyan !important;}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover    {
                          background-color: rgb(143,209,63) !important;
}



.odd {
background-color : rgb(173,219,241) !important;
}

.even {
background-color : rgb(232,245,251) !important;
}

"))),
useShinyjs() ,
            tabItems(
            tabItem(tabName = "Table",
                    DT::dataTableOutput("DataTable")    
                    )
))
))

服务器

shinyServer(function(input, output) {

output$DataTable <- DT::renderDataTable({
   datatable(iris,rownames=FALSE,selection = 'single',options = list(
   searching = FALSE,ordering=FALSE,
   dom = 'Bfrtip',
   buttons = c('copy','excel', 'pdf', 'print', 'colvis'),
   columnDefs = list(list(visible=FALSE, targets=c(2))),
   rowCallback = JS(
     "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
     "var full_text = aData[2]",
     # Tooltip for the rows
     "$('td:eq(1)', nRow).attr('title', full_text);",
     # Showing a hand as a cursor
     "$('td:eq(1)', nRow).css('cursor','pointer');",
     "$('td:eq(1)', nRow).css('font-weight','bold');",
     "}")
     )
     )
     })

Answer 1

这是更新后的代码：

用户界面

shinyUI(
dashboardPage (
dashboardHeader(title="Report"),
dashboardSidebar(sidebarMenu(menuItem("Table",tabName="Table"))),
dashboardBody(

tags$style(HTML("
table.dataTable tr.selected td,
                table.dataTable td.selected {
                background-color: rgb(143,209,63) !important;
                }
                ")),


tags$head(tags$style(HTML("

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
                          background-color: rgb(143,209,63) !important;
}    

.odd {
background-color : rgb(173,219,241) !important;
}

.even {
background-color : rgb(232,245,251) !important;
}

"))),
useShinyjs() ,
            tabItems(
            tabItem(tabName = "Table",
                    DT::dataTableOutput("DataTable")    
                    )
))
))

服务器

shinyServer(function(input, output) {

output$DataTable <- DT::renderDataTable({
datatable(iris,rownames=FALSE,selection = 'single',options = list(
searching = FALSE,ordering=FALSE,
dom = 'Bfrtip',
buttons = c('copy','excel', 'pdf', 'print', 'colvis'),
columnDefs = list(list(visible=FALSE, targets=c(2))),
rowCallback = JS(
 "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
 "var full_text = aData[2]",
 # Tooltip for the rows
 "$('td:eq(1)', nRow).attr('title', full_text);",
 # Showing a hand as a cursor
 "$('td:eq(1)', nRow).css('cursor','pointer');",
 "$('td:eq(1)', nRow).css('font-weight','bold');",
 "}")
 )
 )
 })