javascript - DT 数据表背景颜色为黑色，但仍然有悬停和选择颜色

Question

我刚开始使用 R 中的 DT 库和 datatable() 函数，希望获得有关如何更改其外观的帮助。 .

我目前有一个数据表的黑色背景，希望它在悬停在它上面时改变颜色，或者在选择特定行时改变颜色......但是选择背景似乎消除了悬停选项......任何帮助都会非常感谢。

请看下面的内容，看看我尝试制作带悬停的黑色背景表格有多远。

DT:::datatable(
  head(iris, 20),rownames = FALSE,options = list(dom='t',
    initComplete = JS(
      "function(settings, json) {",
      "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
      "}")
  ),
  container = tags$table(
    class="stripe row-border hover",
    tags$thead(tags$tr(lapply(colnames(iris), tags$th)))
  )
) %>% formatStyle(columns=colnames(iris),color='white',background = 'black')

Answer 1

我用

shiny_0.13.2 
DT_0.1.55

1)你需要 target="row" 在 formatStyle

2) 如果你在 shiny 中使用它，你可以简单地添加 !important 到 hover css :

library(DT)
library(shiny)

ui=shinyUI(
  fluidPage(
    tags$head(tags$style(HTML("table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
                              background-color: #9c4242 !important;
                              } "))),
    DT::dataTableOutput("tt")
    )
  )

server=shinyServer(function(input, output) {
  output$tt=DT::renderDataTable(
    DT:::datatable(
      head(iris, 20),rownames = FALSE,options = list(dom='t',
                                                     initComplete = JS(
                                                       "function(settings, json) {",
                                                       "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
                                                       "}")
      ),
      container = tags$table(
        class="stripe row-border hover",
        tags$thead(tags$tr(lapply(colnames(iris), tags$th)))
      )
    ) %>% formatStyle(columns=colnames(iris),color='white',background = 'black',target = 'row')
  )
})


shinyApp(ui=ui,server=server)

请注意，这只适用于 shiny

更新不 Shiny 的版本

尝试在回调中添加重要内容

library(DT)
library(shiny) # needed for tags
    DT:::datatable(
      head(iris, 20),rownames = FALSE,options = list(dom='t',
                                                     initComplete = JS(
                                                       "function(settings, json) {",
                                                       "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
                                                       "var css = document.createElement('style');
                                                        css.type = 'text/css';
                                                        css.innerHTML = '.table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: #9c4242 !important }';
                                                        document.body.appendChild(css);",
                                                       "}")
      ),
      container = tags$table(
        class="stripe row-border hover",
        tags$thead(tags$tr(lapply(colnames(iris), tags$th)))
      )
    ) %>% formatStyle(columns=colnames(iris),color='white',background = 'black',target = 'row')

更新 2 反转颜色

漂亮的外观你可以使用

CSS

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { -webkit-filter: invert(100%);filter: invert(100%)  }