使用嵌入式 Ruby 迭代器时,如何交替 HTML table 行 类?
How can I have alternating HTML table row classes when using an embedded Ruby iterator?
下面我有一个 index.html.erb
文件的一部分,其中包含 HTML table,我的目标是在使用 Ruby 迭代器时交替显示白色和灰色行。我希望奇数行有 <tr class="bg-white">
& 偶数行有 <tr class="bg-gray-50">
。我正在使用 TailwindCSS 并且我尝试了 children 的奇数和偶数变换 类 但我认为这不是答案。我真的不明白如何将它表达成 if 语句。我不能做“如果客户端 ID 是奇数或偶数:是白色或灰色”,因为如果删除了一个客户端,我不希望 top/beneath 彼此有两个白色或两个灰色行(比如客户端 ID 26已删除,我现在有 25 和 27 个触摸)。非常感谢您提出任何建议。
<tbody>
<% @clients.each do |client| %>
<tr class="bg-white">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 ">
<%= client.first_name + " " + client.last_name %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<%= client.phone_number %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
</td>
</tr>
<% end %>
</tbody>
您可以为此使用 cycle
查看助手:
<tbody>
<% @clients.each do |client| %>
<%= tag.tr(class: cycle("bg-white", "bg-gray-50")) do %>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 ">
# ...
</td>
<% end %>
<% end %>
</tbody>
在我看来,使用 Tailwind CSS even
和 odd
变体是您想要实现的目标的良好而干净的解决方案。
这是使用 Ruby .erb
生成的代码示例
<table class="w-full">
<tbody>
<tr class="even:bg-gray-100 odd:bg-blue-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555 111-1111</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"></td>
</tr>
<tr class="even:bg-gray-100 odd:bg-blue-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">johns</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555 222-2222</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"></td>
</tr>
<tr class="even:bg-gray-100 odd:bg-blue-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">davison</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555- 333-3333</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"></td>
</tr>
</tbody>
</table>
这是一个实现示例:
https://play.tailwindcss.com/2BNYhQIwfQ
记得将 'even', 'odd'
添加到变体部分。
variants: {
backgroundColor: ['odd','even'],
},
下面我有一个 index.html.erb
文件的一部分,其中包含 HTML table,我的目标是在使用 Ruby 迭代器时交替显示白色和灰色行。我希望奇数行有 <tr class="bg-white">
& 偶数行有 <tr class="bg-gray-50">
。我正在使用 TailwindCSS 并且我尝试了 children 的奇数和偶数变换 类 但我认为这不是答案。我真的不明白如何将它表达成 if 语句。我不能做“如果客户端 ID 是奇数或偶数:是白色或灰色”,因为如果删除了一个客户端,我不希望 top/beneath 彼此有两个白色或两个灰色行(比如客户端 ID 26已删除,我现在有 25 和 27 个触摸)。非常感谢您提出任何建议。
<tbody>
<% @clients.each do |client| %>
<tr class="bg-white">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 ">
<%= client.first_name + " " + client.last_name %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<%= client.phone_number %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
</td>
</tr>
<% end %>
</tbody>
您可以为此使用 cycle
查看助手:
<tbody>
<% @clients.each do |client| %>
<%= tag.tr(class: cycle("bg-white", "bg-gray-50")) do %>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 ">
# ...
</td>
<% end %>
<% end %>
</tbody>
在我看来,使用 Tailwind CSS even
和 odd
变体是您想要实现的目标的良好而干净的解决方案。
这是使用 Ruby .erb
<table class="w-full">
<tbody>
<tr class="even:bg-gray-100 odd:bg-blue-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555 111-1111</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"></td>
</tr>
<tr class="even:bg-gray-100 odd:bg-blue-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">johns</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555 222-2222</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"></td>
</tr>
<tr class="even:bg-gray-100 odd:bg-blue-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">davison</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">555- 333-3333</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"></td>
</tr>
</tbody>
</table>
这是一个实现示例: https://play.tailwindcss.com/2BNYhQIwfQ
记得将 'even', 'odd'
添加到变体部分。
variants: {
backgroundColor: ['odd','even'],
},