Home/ Questions/Q 7575823
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T16:46:24+00:00

Here’s some easy reputation for someone. The scenario I have a table that is

  • 0

Here’s some easy reputation for someone.

The scenario

I have a table that is built dynamically using JSP. There are several <td>‘s that have a number in the cell representing a percentage. See this fiddle for an example. I need to change the background color of the cell based on the percentage represented in the cell. For example:

value < 50 = Red
value >= 50 & < 90 = Yellow
value >= 90 = Green

In addition, I need the cell contents to be appended with the ‘%’ sign. For example:

90 = 90%

The Question

How do I add a background-color based on the contents of the cell, and append text to it as well?

I have some jQuery I was going to use for this but it’s not working at all. This too is in the fiddle. I would also like it to be as lean as possible. If this can be done in a couple lines that would be great. If it can be done purely with CSS that would be even better, but I don’t think that’s possible.

The Code

(if you don’t like to follow links)

CSS

.red {
    background-color: #f99;
}
.yellow {
    background-color: #ff9;
}
.green {
    background-color: #9f9;
}
.notApplicable {
    background-color: #fff;
}
td.stopGapCondition {
    text-align: center;
}​

jQuery

if ($('.stopGapCondition').text() < 50) {
    $('td .stopGapCondition').addClass('red');
}
if ($('.stopGapCondition').text() >= 50 && $('.stopGapCondition').text() < 90) {
    $('td .stopGapCondition').addClass('yellow');
}
if ($('.stopGapCondition').text() >= 90) {
    $('td .stopGapCondition').addClass('green');
}

HTML

<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
  </head>
  <body>
    <table class="content bordered" border="3" cellspacing="2" cellpadding="3" valign="top">
      <tbody>
        <tr>
          <th class="stopGapTH" colspan="4">
            Patient List
          </th>
          <th class="stopGapTH" colspan="99">
            Clinical Adherence Information
          </th>
        </tr>
        <tr height="30">
          <th align="middle">
            Patient Name
          </th>
          <th align="middle">
            DOB
          </th>
          <th align="middle">
            Primary Disease
          </th>
          <th align="middle">
            Risk Index
          </th>
          <th>
            Athsma
          </th>
          <th>
            COPD
          </th>
          <th>
            Diabetes
          </th>
          <th>
            Heart Disease
          </th>
        </tr>
        <tr>
          <td>
            Louis Armstrong
          </td>
          <td>
            Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition">
            50
          </td>
          <td class="stopGapCondition">
            80
          </td>
          <td class="stopGapCondition">
            75
          </td>
          <td class="stopGapCondition">
            90
          </td>
        </tr>
        <tr>
          <td>
            Bob Barker
          </td>
          <td>
            Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition red">
            49
          </td>
          <td class="stopGapCondition yellow">
            50
          </td>
          <td class="stopGapCondition yellow">
            89
          </td>
          <td class="stopGapCondition green">
            90
          </td>
        </tr>
        <tr>
          <td>
            David Brinkley
          </td>
          <td>
            1Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Tom Brokaw
          </td>
          <td>
            10Blah4
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad2 Sandy
          </td>
          <td>
            01Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad3 Sandy
          </td>
          <td>
            0Blah
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad4 Sandy
          </td>
          <td>
            Blah5
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Cad5 Sandy
          </td>
          <td>
            01Blah5
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Alex Trebek
          </td>
          <td>
            1Blah1
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
        <tr>
          <td>
            Chucka Woolerya
          </td>
          <td>
            10Blah51
          </td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
          <td class="stopGapCondition"></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

EDIT: 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. ​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use .each to iterate the results; you can’t apply one operation to them all at the same time.

    $('.stopGapCondition').each(function() {
    var $this = $(this);
    var value = $this.text();

    if(!/^\s*\d+(\.\d+)?\s*$/.test(value)) {
        $this.addClass('notApplicable');
        return;
    }

    if(value < 50) {
        $this.addClass('red');
    } else if(value < 90) {
        $this.addClass('yellow');
    } else {
        $this.addClass('green');
    }

    $this.text($this.text() + '%');
});​

    Here’s a demo.

    • 0