Javascript DT datatable背景色为黑色，但仍有悬停和选择颜色

我不熟悉使用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')

我用

1） 您需要在

formatStyle

2） 如果您在

shinny

中使用它，只需添加！悬停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)

注意，这只在有光泽的情况下起作用

更新不闪亮的版本 尝试在回调中添加重要内容

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

---

不确定您是否已经完成了答案的编写，但闪亮的代码或非闪亮的版本都不起作用…在悬停时改变颜色或单击时改变…（仅供参考，我使用以下…

runApp（shinyApp（ui=ui，server=server））

）运行闪亮的代码只悬停，在您的应用程序中不起作用？（DT的哪个版本）啊，闪亮的版本现在可以工作了…我使用的是DT v0.1，你如何为闪亮的版本包含css？不完全理解你的意思，但运行应用程序请查看浏览器中的inspect+将鼠标悬停添加到行…查看一些css没有使用..将css复制到

标记$head（标记$style）（HTML（

并添加重要的（或`-webkit过滤器：反转（100%）；过滤器：反转（100%）用于简单地为悬停创建反转颜色`）啊，我明白了，我以为css是作为一个单独的文件放进去的……你写的东西现在有意义了！谢谢！

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')

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