title: color coding table after checking conditions from an array
body: <p>I am trying to color code a td after checking certain condition from an array. Everything works fine except this piece. Here is what I have</p>
  
  <pre><code>&lt;table border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;th&gt;First Name&lt;/th&gt;
      &lt;th&gt;Last Name&lt;/th&gt;
      &lt;th&gt;Profession&lt;/th&gt;
      &lt;th&gt;Code&lt;/th&gt;
  &lt;/table&gt;
  
  var html = "";
  
  $.each(arrayTest, function () {
      html += '&lt;tr&gt;&lt;td&gt;' + this.firstName + '&lt;/td&gt;';
      html += '&lt;td&gt;' + this.lastName + '&lt;/td&gt;';
      html += '&lt;td&gt;' + this.profession + '&lt;/td&gt;';
      html += '&lt;td class="colorType"&gt;&lt;/td&gt;&lt;tr&gt;';
  
      if (this.type === 'red') {
          $('.colorType').css('background', 'red')
      }
      else if (this.type === 'blue') {
          $('.colorType').css('background', 'blue')
      } else {
          $('.colorType').css('background', 'white')
      }
  });
  
  $('table').append(html);
  </code></pre>
  
  <p>Here is my fiddle
  <a href="http://jsfiddle.net/sghoush1/J2ssK/9/" rel="nofollow">http://jsfiddle.net/sghoush1/J2ssK/9/</a></p>