title: Change <td> background based on percentage in cell, as well as add '%' to number
body: <p>Here's some easy reputation for someone.</p>
  
  <h2>The scenario</h2>
  
  <p>I have a table that is built dynamically using JSP. There are several <code>&lt;td&gt;</code>'s that have a number in the cell representing a percentage. See <a href="http://jsfiddle.net/thepriebe/R3AUh/#base" rel="nofollow">this fiddle</a> for an example. I need to change the background color of the cell based on the percentage represented in the cell. For example:</p>
  
  <pre><code>value &lt; 50 = Red
  value &gt;= 50 &amp; &lt; 90 = Yellow
  value &gt;= 90 = Green
  </code></pre>
  
  <p>In addition, I need the cell contents to be appended with the '%' sign. For example:</p>
  
  <pre><code>90 = 90%
  </code></pre>
  
  <h2>The Question</h2>
  
  <blockquote>
    <p>How do I add a background-color based on the contents of the cell, and append text to it as well?</p>
  </blockquote>
  
  <p>I have some jQuery I was going to use for this but it's not working at all. This too is in <a href="http://jsfiddle.net/thepriebe/R3AUh/#base" rel="nofollow">the fiddle</a>. I would also like it to be as lean as possible. If this can be done in a couple lines that would be great. <strong>If it can be done purely with CSS that would be even better</strong>, but I don't think that's possible.</p>
  
  <h2>The Code</h2>
  
  <p>(if you don't like to follow links)</p>
  
  <h3>CSS</h3>
  
  <pre class="lang-css prettyprint-override"><code>.red {
      background-color: #f99;
  }
  .yellow {
      background-color: #ff9;
  }
  .green {
      background-color: #9f9;
  }
  .notApplicable {
      background-color: #fff;
  }
  td.stopGapCondition {
      text-align: center;
  }​
  </code></pre>
  
  <h3>jQuery</h3>
  
  <pre class="lang-js prettyprint-override"><code>if ($('.stopGapCondition').text() &lt; 50) {
      $('td .stopGapCondition').addClass('red');
  }
  if ($('.stopGapCondition').text() &gt;= 50 &amp;&amp; $('.stopGapCondition').text() &lt; 90) {
      $('td .stopGapCondition').addClass('yellow');
  }
  if ($('.stopGapCondition').text() &gt;= 90) {
      $('td .stopGapCondition').addClass('green');
  }
  </code></pre>
  
  <h3>HTML</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table class="content bordered" border="3" cellspacing="2" cellpadding="3" valign="top"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th class="stopGapTH" colspan="4"&gt;
              Patient List
            &lt;/th&gt;
            &lt;th class="stopGapTH" colspan="99"&gt;
              Clinical Adherence Information
            &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr height="30"&gt;
            &lt;th align="middle"&gt;
              Patient Name
            &lt;/th&gt;
            &lt;th align="middle"&gt;
              DOB
            &lt;/th&gt;
            &lt;th align="middle"&gt;
              Primary Disease
            &lt;/th&gt;
            &lt;th align="middle"&gt;
              Risk Index
            &lt;/th&gt;
            &lt;th&gt;
              Athsma
            &lt;/th&gt;
            &lt;th&gt;
              COPD
            &lt;/th&gt;
            &lt;th&gt;
              Diabetes
            &lt;/th&gt;
            &lt;th&gt;
              Heart Disease
            &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Louis Armstrong
            &lt;/td&gt;
            &lt;td&gt;
              Blah
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;
              50
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;
              80
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;
              75
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;
              90
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Bob Barker
            &lt;/td&gt;
            &lt;td&gt;
              Blah
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition red"&gt;
              49
            &lt;/td&gt;
            &lt;td class="stopGapCondition yellow"&gt;
              50
            &lt;/td&gt;
            &lt;td class="stopGapCondition yellow"&gt;
              89
            &lt;/td&gt;
            &lt;td class="stopGapCondition green"&gt;
              90
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              David Brinkley
            &lt;/td&gt;
            &lt;td&gt;
              1Blah
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Tom Brokaw
            &lt;/td&gt;
            &lt;td&gt;
              10Blah4
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Cad2 Sandy
            &lt;/td&gt;
            &lt;td&gt;
              01Blah
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Cad3 Sandy
            &lt;/td&gt;
            &lt;td&gt;
              0Blah
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Cad4 Sandy
            &lt;/td&gt;
            &lt;td&gt;
              Blah5
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Cad5 Sandy
            &lt;/td&gt;
            &lt;td&gt;
              01Blah5
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Alex Trebek
            &lt;/td&gt;
            &lt;td&gt;
              1Blah1
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              Chucka Woolerya
            &lt;/td&gt;
            &lt;td&gt;
              10Blah51
            &lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
            &lt;td class="stopGapCondition"&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> Additionally, I forgot to mention that if it doesn't contain a number, meaning it could contain "na" or "n/a" or "not applicable", it should be white. I added the css but forgot to mention it in the question.  ​</p>