跨多个tbody元素实现交替行颜色

Question

CSS中是否有一种方法可以实现备用行着色，将多个tbody元素中的所有行视为一个组？

例如：

library(shiny)
library(DT)

# data("diamonds") don't know where I can find this dataset, hence I'll use
                # diamond dataset 

library(ggplot2) # for diamonds dataset


cut <- unique(as.character(diamonds$cut)) # or just levels(diamonds$cut)
color <- unique(as.character(diamonds$color))
clarity <- unique(as.character(diamonds$clarity))

runApp(list(ui = fluidPage(
    titlePanel("Summary"),

    sidebarLayout(
      sidebarPanel(
        # changed names of inputs
        selectInput("cut", label = "Cut", choices = cut, selected = NULL, multiple = T),
        selectInput("filter_join1", label = "", choices = c("OR","AND")),
        selectInput("color", label = "Color", choices = color, selected = NULL, multiple = T),
        selectInput("filter_join2", label = "", choices = c("OR","AND")),
        selectInput("clarity", label = "Clarity", choices = clarity, selected = NULL, multiple = T)
      ),

      mainPanel(
        DT::dataTableOutput("table")
      )
    )
  ),

  server = function(input, output, session) {

    WorkingDataset <- reactive({ 
      req(input$cut, input$color, input$clarity)
      # show table only if all three inputs are available

      # depending on filter_join inputs return "OR" or "AND"
      join1 <- ifelse(test = input$filter_join1 == "OR", yes = "| ", no = "& ")
      join2 <- ifelse(test = input$filter_join2 == "OR", yes = "| ", no = "& ")

      # You could do this differently: just set choices = c("OR" = "|", "AND" = "&"))
      # in the selectInput widget.

      # Similar as in the example above with the iris dataset. 

      cond_str <- paste0(
        "with(diamonds, ", 
        paste0("cut %in% ", "c(", paste0("'", input$cut, collapse = "',"), "')", colapse = " "),
        join1, 
        paste0("color %in% ", "c(", paste0("'", input$color, collapse = "',"), "')", colapse = " "),
        join2,
        paste0("clarity %in% ", "c(", paste0("'", input$clarity, collapse = "',"), "')", colapse = " "),
        ")")

      print(cond_str) # print the result to the console
      cond <- parse(text = cond_str)
      df <- as.data.frame(diamonds)[eval(cond), ]
      df
    }) 

    output$table <- DT::renderDataTable({ WorkingDataset() })

  })
)

我知道nth-child，但这在这里不起作用，因为如果每个tbody只有一行，那么它们都会变色。

任何人都知道有任何方法可以实现这种行为吗？

Answer 1

没有CSS ...没有。 nth-of-并非如此。你需要Javascript。

Jquery让这很容易。

＆＃13;

＆＃13;

$("#my-table tr:even").css("background-color", "#bbbbff");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 3.1</td>
    </tr>
    <tr>
      <td>Row 3.2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 4.1</td>
    </tr>
    <tr>
      <td>Row 4.2</td>
    </tr>
    <tr>
      <td>Row 4.3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 5</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

#my-table tbody
{
  display: block;
  margin: 20px auto;
}
#my-table tbody tr
{
  background-color: #d88;
}
#my-table tbody:nth-child(even) tr
{
  background-color: #8d8;
}
#my-table tbody:nth-child(even) tr:nth-child(even)
{
  background-color: #d88;
}
#my-table tbody:nth-child(odd) tr:nth-child(odd)
{
  background-color: #8d8;
}

<table id="my-table">
  <tbody>
    <tr><td>Row 1</td></tr>
</tbody>
<tbody>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 2</td></tr>
</tbody>
<tbody>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 3</td></tr>
</tbody>
<tbody>
    <tr><td>Row 4</td></tr>
</tbody>
<tbody>
    <tr><td>Row 5</td></tr>
</tbody>
  </table>

Answer 3

如果html标记中的行数在每个tbody中相同，则可以使用以下CSS解决方案：

＆＃13;

＆＃13;

#my-table tbody:nth-child(odd)
{
  background-color: red;
}

#my-table tbody:nth-child(even)
{
  background-color: yellow;
}

＆＃13;

<table id="my-table">
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 4</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Row 5</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

否则，您可以考虑使用CSS3：nth-​​child（）选择器，示例nth-child(2)来选择特定索引处的元素。

或者您可以使用JavaScript，来自@Paulie_D的回答将解决您的问题。

＆＃13;

＆＃13;

#tb1 tr:nth-child(1){
    background-color: green;
}
#tb1 tr:nth-child(2){
    background-color: red;
}
#tb2 tr:nth-child(1){
    background-color: green;
}
#tb3 tr:nth-child(1){
    background-color: red;
}
#tb3 tr:nth-child(2){
    background-color: green;
}
#tb3 tr:nth-child(3){
    background-color: red;
}
#tb4 tr:nth-child(1){
    background-color: green;
}
#tb5 tr:nth-child(1){
    background-color: red;
}

＆＃13;

<table id="my-table">
  <tbody id="tb1">
    <tr>
      <td>Row 1a</td>
    </tr>
    <tr>
      <td>Row 1b</td>
    </tr>
  </tbody>
  <tbody id="tb2">
    <tr>
      <td>Row 2a</td>
    </tr>
  </tbody>
  <tbody id="tb3">
    <tr>
      <td>Row 3a</td>
    </tr>
    <tr>
      <td>Row 3b</td>
    </tr>
    <tr>
      <td>Row 3c</td>
    </tr>
  </tbody>
  <tbody id="tb4">
    <tr>
      <td>Row 4</td>
    </tr>
  </tbody>
  <tbody id="tb5">
    <tr>
      <td>Row 5a</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;