title: How to loop through table rows, change class, and do it all with "n" number of rows and knowing the values of the FIRST cell in each row
body: <p>OK, easy question, confusing answer...</p>
  
  <p>I have this code:</p>
  
  <pre><code>&lt;tbody&gt;
      {{#each alertRow}}
          &lt;tr data-toggle="collapse" data-target="#data{{id}}" class="accordion-toggle"&gt;
              &lt;td&gt;&lt;i id="dataCbx{{id}}" style="text-align:center;" class="icon-check center pointerCursor" title="Click here to check/uncheck the box. Click on another part of the row to expand collapse without affecting the checkbox" onclick="changeIcon(this.id);"&gt;&lt;/i&gt;&lt;/td&gt;
              &lt;td&gt;{{alertLevel}}&lt;/td&gt;
              &lt;td&gt;{{alertType}}&lt;/td&gt;
              &lt;td&gt;{{network}}&lt;/td&gt;
              &lt;td&gt;{{site}}&lt;/td&gt;
              &lt;td&gt;{{resource}}&lt;/td&gt;
              &lt;td&gt;{{component}}&lt;/td&gt;
              &lt;td&gt;{{details}}&lt;/td&gt;
              &lt;td&gt;{{alertTime}}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="10" class="hiddenRow"&gt;
                  &lt;div id="data{{id}}" class="accordian-body collapse innerTableCollapse"&gt;
                      &lt;div style="float: left;"&gt;Server Name:{{network}}&lt;/div&gt;
                      &lt;div style="float: left;"&gt;Status:{{status}}&lt;/div&gt;
                      &lt;div style="float: left;"&gt;Issue Description:&amp;nbsp;&lt;/div&gt;
                      &lt;div style="float: left;"&gt;Alert Details:&amp;nbsp;&lt;/div&gt;
                      &lt;div style="float: left;"&gt;Resource Type:&amp;nbsp;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
       {{/each}}   
   &lt;/tbody&gt;
  </code></pre>
  
  <p>Notice, I'm using HANDLEBARS.JS but that's not the problem.</p>
  
  <p>So here's what I need to do:</p>
  
  <ol>
  <li>When the PAGE is RENDERED, I need to be able to LOOP through all the rows, no matter how many, and check the value of {{alertLevel}}...</li>
  <li>If the ALERTLEVEL = 0 then make background-color for the FIRST TD "RED"</li>
  <li>If the ALERTLEVEL = 1 then make background-color for the FIRST TD "YELLOW"</li>
  <li>If the ALERTLEVEL = 2 then make background-color for the FIRST TD "GREEN"</li>
  </ol>
  
  <p>Simply enough, right?</p>
  
  <p>Then, once I have that, based on the ALERT LEVEL of the FIRST COLUMN, I need to make the ENTIRE ROW (minus the first column), a LIGHT RED for ALERTLEVEL = 0, a LIGHT YELLOW for ALERTLEVEL = 1 and a LIGHT GREEN for ALERTLEVEL of 2.</p>
  
  <p>Can you assist me?? Please.... thanks.</p>