Question

我所知道的： Rails具有cycle()方法，该方法使表中的奇数/偶数行具有不同的CSS类。我们可以将多个类传递给cycle()方法，效果很好。

我想要的行分为三个;所以，我用过这个：

...some html-table  code...
<tr class="<%= cycle("table_row_1","table_row_2","table_row_3","table_row_4","table_row_5","table_row_6") %>">
...some more html-table  code...

我定义的相应CSS是：

.table_row_1 { background-color: red;}
.table_row_2 { background-color: red;}
.table_row_3 { background-color: red;}
.table_row_4 { background-color: blue;}
.table_row_5 { background-color: blue;}
.table_row_6 { background-color: blue;}

它有效，但感觉不干净。

是否有推荐的方法在Rails中执行此操作？

更新

与@Ryan Bigg的答案类似，是否可以按顺序生成字符串，以便可以使用prefix_1 prefix_2 prefix_3语法或某些方式以某种方式发送*3形式的字符串的循环（）方法其他方式？
使用这个“每第三排”条纹的灵感来自article on Edward Tufte's site
似乎CSS3可以做到这一点（link），但目前还没有广泛支持：（
与问题无关，但我刚刚搜索了我在Google上遇到的这个问题，以及questionhub.com中列出的问题！我在questionhub.com上从未问过这个问题！
现在也在http://loopingrecursion.com！发生了什么事。

Answer 1

这个怎么样？

<tr class="<%= cycle(*[["striped"]*3,["unstriped"]*3].flatten) %>">

Answer 2

实际上这听起来像是我用纯CSS解决的问题：

table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3) { background:red;} 
table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n)   { background:blue;}

虽然这很简短，但遗憾的是does not work in IE（它将在新的IE9中有效）。

要实现这一点，您可以使用jQuery，它提供相同的选择器，并且完全兼容跨浏览器。

在你的CSS中添加两个类：

table_row_third_even { background: red;}
table_row_third_odd { background: blue;}

然后你写了一些javascript（例如在application.js内），就像这个

$(function() {
  $('table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3)').addClass('table_row_third_even');
  $('table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n)').addClass('table_row_third_odd');
});

并且您的表必须具有类highlight（您应该将其更改为更合适的名称，这只是一个示例）;但没有针对tr标记的具体内容，因为它们将通过javascript代码添加。

<table class='highlight'>
  <tr> ... </tr>
  <tr> ... </tr>
  <tr> ... </tr>
  <tr> ... </tr>
</table>

但要实现这一点，您需要在项目中引入jQuery。好处：它可以保持你的红宝石代码清除这样做所需的混乱。

希望这有帮助！

Answer 3

我找到了一种方法来做到这一点，这有点“干净”，现在适合我。详细说明：

在控制器助手中（还没有错误检查！）：

def cycle_every_third(options = [])
  cycle(options[0],options[0],options[0],options[1],options[1],options[1])
end

HTML：

...
<tr class="<%= cycle_every_third(["table_row_1","table_row_2"] ) %>">
...

CSS：

.table_row_1 {   background-color: red;}
.table_row_2 {   background-color: blue;}

我想知道这是一个很好的方法吗？我可能不知道的Rails中的任何陷阱，在helper方法中调用cycle()而不是在rhtml / erb文件中调用它？

Rails CSS zebra-striping行，但是以三个为一组

3 个答案: