Change Table Row Color Based On Cell Value With jQuery

Question

I don't have much experience with jQuery, so I'm not sure how close I am to this. I have a table in my Rails app and I want the rows where the score.test_type value == true. (when it == true I have it display as the word "practice" if that matters) My table ID is scores and I have a CSS class of .score_table_color with a background-color. In my code below I don't reference score.test_type at all, which I'm not sure is an issue. Here is the jQuery code that I have so far

$(function(){
$("#scores tr").keyup(function() {
  var textValue = $(this).val();
  if(textValue == false){
    // add css class or any manipulation to your dom.
    $("#scores tr").addClass('score_table_color');
  }
 });
});

I have this pasted in the users.js file, because the table appears on the user's page. (the user has_many scores)

UPDATE:

I've updated my code to this:

$(function(){
$("#scores tr").ready(function() {
  var textValue = $(this).val();
  if(textValue == false){
    // add css class or any manipulation to your dom.
    $("#scores tr").addClass("score_table_color");
  }
 });
});

This makes the entire table blue. The problem with my code is that I seem to be saying that something in the table is false, not necessarily the score.test_type This is the way that cell is coded:

<td>
 <% if score.test_type == true %>
  <%= 'Practice' %>
 <% else %>
  <%= 'Actual' %>
 <% end %>      
</td>

Answer 1

I ended up just solving this using just Ruby instead of jQuery. (I'd still like to figure out how to get the jQuery to work properly. Here's how I made it work:

Below is the code showing the beginning of my loop that iterates through the user's scores to create the table. Al I really did was enclose the in an if/else statement that says "if score.test_type == false, then apply the css class score_table_color, else just leave the alone. Then my first is the score.test_type, which is a boolean. If that is false, then the row background color changes based on my CSS.

<% @scores.order('taken_date').where.not(:name => 'ACT').each do |score| %>
    <% if score.test_type == false %>
        <tr class="score_table_color">
    <% else %>
        <tr>
    <% end %>

          <td>
            <% if score.test_type == true %>
              <%= 'Practice' %>
            <% else %>
              <%= 'Actual' %>
            <% end %>       
          </td> 

Answer 2

Yes, the answer above definitely will work. But I like to post how I solved my own in a Job Board I created, so my answers will be a little detailed than just the task needed from the question, but my conclusion will strictly deal with using a simple if..else statement to answer the question.

Firstly

I defined a css to deal with my highlights, such that I have the following in my stylesheet pipeline:

/* For Row Highlighted */

.highlighted {
  background-color: #CFF3FF;
}

Note : You could use any color as you wish.

Secondly

I added a column to my already existing table with a Boolean data type, by running rails g migration addHighlightedToJobs . In my own case highlighted is my ColumnName, and Jobs is my TableName, such that my migration looks as this:

class AddHighlightedToJobs < ActiveRecord::Migration
  def change
    add_column :jobs, :highlighted, :boolean
  end
end

Then, I did run rake db:migrate to migrate my new migration.

Note : TableName must be Plural , if you are generating migrations as I have stated.

Thirdly

I added a check_box to my form just alternate between true and false when it is either checked or unckecked on my column name called highlighted

<%= f.check_box :highlighted %>

Lastly

To come to an answer to the question asked, since I have a check_box on my form, if checked, it posts to be true on my DB Table, and if unchecked, it posts to be false on my DB Table.

So, to change my table row color in my rails application, I used a simple if..else statement to call highlighted from my stylesheet with that such that I have:

<% @jobs.each do |job| %>

    <% if job.highlighted == true %>
      <section class="container">
        <div class="row jobs highlighted">
        <div class="col-md-4" style="font-size: 20px;"><strong><%= job.company_name %></strong></div>
        <div class="col-md-4" style="font-size: 20px;"><%= link_to(job.title, job) %></div>
        <div class="col-md-4 text-right" style="font-size: 20px; float: left;"><%= job.created_at.strftime('%d %B %y') %></div>
        </div>
      </section>
    <% else %>
      <section class="container">
        <div class="row jobs">
        <div class="col-md-4" style="font-size: 20px;"><strong><%= job.company_name %></strong></div>
        <div class="col-md-4" style="font-size: 20px;"><%= link_to(job.title, job) %></div>
        <div class="col-md-4 text-right" style="font-size: 20px; float: left;"><%= job.created_at.strftime('%d %B %y') %></div>
        </div>
      </section>
    <% end %>

<% end %>

I really believe my conclusion is DRY-which violates Rails Paradigm. We could rewrite it such that it becomes:

<% @jobs.each do |job| %>
      <section class="container">
        <% if job.highlighted == true %>
          <div class="row jobs highlighted">
        <% else %>
          <div class="row jobs">
        <% end %>
        <div class="col-md-4" style="font-size: 20px;"><strong><%= job.company_name %></strong></div>
        <div class="col-md-4" style="font-size: 20px;"><%= link_to(job.title, job) %></div>
        <div class="col-md-4 text-right" style="font-size: 20px; float: left;"><%= job.created_at.strftime('%d %B %y') %></div>
        </div>
        </div>
      </section>
<% end %>