【问题标题】:Every Other Row | Nth column of table in Haml每隔一排 | Haml 中表格的第 N 列
【发布时间】:2012-12-23 04:24:16
【问题描述】:

尝试在 HAML 中制作表格,我有以下内容:

%table
  %tbody
    %tr
      %th{:rowspan => 2} Name
      %th{:class => "leftBorderS", :colspan => 5} Monday
      %th{:class => "leftBorderS", :colspan => 5} Tuesday
      %th{:class => "leftBorderS", :colspan => 5} Wednesday
      %th{:class => "leftBorderS", :colspan => 5} Thursday
      %th{:class => "leftBorderS", :colspan => 5} Friday
      %th{:class => "leftBorderS", :colspan => 5} Saturday
    %tr
      - 6.times do
        %th{:class => "leftBorderS"} A
        %th{:class => "leftBorderD"} B
        %th{:class => "leftBorderD"} C
        %th{:class => "leftBorderD"} D
        %th{:class => "leftBorderD"} E

    - @data.each do |row|
      %tr
        - row.each do |column|
          %td{:class => "leftBorderD"}= column

Css 类:

table {
  border-collapse: collapse;
}
th {
  border: 1px solid #ccc;
  padding: 0.2em;
}
.weeklyReview .leftBorderS {
  border-left: 1px solid black;
  text-align: center;
}
.weeklyReview .leftBorderD {
  border-left: 1px dotted orange;
}
.weeklyReview .rowGray {
  background-color: gray;
}
.weeklyReview .rowWhite {
  background-color: white;
}

Rails 控制器传递的示例数据:

@data = [["adam", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["boy", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["charles", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["david", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["echo", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["foxtro", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["gamma", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["helio", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["indigo", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5],]

问题出现在代码的最后一部分。我希望每个其他 %tr 都被不同地着色。目前默认是灰色的,但这仍然意味着其他的都必须是白色的,所以我只做了两个类来在两者之间切换)。此外,为了分隔日期,只有某些 %tds 将具有实心左边框,否则,它们将具有虚线边框。

对于 HAML 标记:

  1. 如何隔行遍历?
  2. 如何仅将nth 实例应用于数据单元格?

have 是什么,它应该是什么like

我主要在寻找语法,因为它可以应用于数据单元格、行、列或任何需要解析或单步执行的内容。

【问题讨论】:

    标签: html css ruby-on-rails ruby haml


    【解决方案1】:

    这似乎是一个 CSS 问题。

    使用nth-of-type 并忘记所有这些额外的课程:

    table {
      background-color: salmon;
    }
    
    th {
      background: salmon;
    }
    
    tr:nth-of-type(2n) {
      background: salmon;
    }
    tr:nth-of-type(2n+1) {
      background: lightblue;
    }
    

    你也可以用列来做:

    td:nth-of-type(5n-3) {
      color: white
    }
    

    【讨论】:

    • 首先,你让我大吃一惊,不知道 CSS 具有 Jquery-ish 功能。非常感谢那里。包含%cols 会更好,还是在第 n 个 td 之前访问它?
    • 我会亲自做第 n 个 td。另外,这里有一个 little tool 来帮助解决令人困惑的(至少有时对我而言)第 n 个语法。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-20
    • 2015-03-22
    相关资源
    最近更新 更多