Color coding table rows depending on an attribute

I need to show a different background color depending on the type of
comment posted. The type of comment is determined from a drop-down
selection. I figured the simplest way would be to do something like I
have below, but I can't seem to get it to work:

<tr <%= puts '"style = "background: red;"' if comment.comment_type ==
'Hiring Process' %> >

I have 4-5 comment_types that need coloring, so I'll probably move
this into a helper when I'm finished using some form of,

if comment_type == 'Hiring Process'
puts "style = 'background: red;'"
elsif comment_type == 'Job Title Change'
puts "style = 'background: green;'"

A similar application would be a help desk ticket system where high
priority tickets would be shown in a different color.


<tr <%= '"style = "background: red;"' if remark.comment_type ==
'Hiring Process' %> >

a helpful IRC chatter, named gnufied, told me that 'puts' cannot go in
a rhtml. So, I removed the puts and it worked.

First you need to read more docs about how the erb template language works

1) you don't need the puts <%= code %> will print the output of the
code on the page.

2) is not necessary that you include "style =" in the ruby code since
that part is the same in any case. You can do

  <tr style="background: <%= "red" if comment.comment_type == 'Hiring
Process' %>;">

3) instead of writing explicitly the colour you can just set a css
class depending by the comment type, you just need to make the
comment_type a valid string for a css class. By instance you can
substitute spaces with _ and make everything lowercase
  <tr class="<%= comment.comment_type.gsub(' ', '_').downcase %>">

Thanks Paolo,

Yeah, you are right, the puts thing was a blunder on my part. Also,
I'm aware about the CSS styling, but I just like to take baby steps
since this is my first rails app.

That was helpful!


Brad Winchester

There are two things I think you could do to clean this up:
1) Don't put so much code within HTML tags. A helper can definitely help with this.
2) Use class attributes to give your tags semantic mean, and then use CSS to style them appropriately.

For 1), create a helper, something like (untested):

def class_attr_for(comment_type)
   value = case comment_type
           when 'Hiring Process'
           when 'Job Title Change'
   class_attr = value ? %(class="#{value}") : ''

class_attr_for will return either class="someValue" or ""

Then, you can call it in your view template like:

<tr <%= class_attr_for comment_type%>>

And in your CSS add something like:

.hiringProcess { background-color: red; }
.jobTitleChange { background-color: green; }

This gives you much better separation between your mark up and your presentation, as well as cleaning up the view template.

Hope this helps.

Michael Glaesemann
grzm seespotcode net

You are right...gotta keep it clean and DRY. I'll definitely do this.