http://jsfiddle.net/stofke/Ya68Q/

      $(function() {
            $('tr > td:odd').each(function(index) {
                var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
                var score = $(this).text();
                for (var i = 0; i < scale.length; i++) {
                    if (score <= scale[i][1]) {
                        $(this).addClass(scale[i][0]);
                    }
                }
            });
       });

мой первый взгляд на это, учитывая следующую структуру таблицы:

<table>
    <col id="name" />
    <col id="score" />
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Allan, Paul</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Bartlett, James</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Callow, Simon</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Dennis, Mark</td>
            <td>19</td>
        </tr>
        <tr>
            <td>Ennals, Simon</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Finnegan, Seamus</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

css:

table {
    width: 20em;
}

#score {
    width: 50%;
}

#name {
    width: 50%;
}

th {
    border-bottom: 2px solid #000;
    padding: 0.5em 0 0.1em 0;
    font-size: 1.2em;
}

td {
    border-bottom: 2px solid #ccc;
    padding: 0.5em 0 0.1em 0;
}

th:nth-child(even),
td:nth-child(even) {
    text-align: center;
}

.vGood {
    background-color: #0f0;
}

.good {
    background-color: #0c0;
}

.avg {
    background-color: #060;
}

.poor {
    background-color: #c00;
}

.vPoor {
    background-color: #f00;
}

и jQuery:

$('tbody tr td:not(":first")').each(

function() {
    var vGood = 30,
        good = 25,
        avg = 20,
        poor = 15,
        vPoor = 10,
        score = $(this).text();

    if (score >= vGood) {
        $(this).addClass('vGood');
    }
    else if (score < vGood && score >= good) {
        $(this).addClass('good');
    }
    else if (score <good && score >= avg) {
        $(this).addClass('avg');
    }
    else if (score < avg&& score >= poor) {
        $(this).addClass('poor');
    }
    else if (score < poor) {
        $(this).addClass('vPoor');
    }
    });

JS Fiddle demo.

Это, конечно, подход грубой силы. Это сработает, но это не самый оптимизированный/эффективный подход.

вы можете использовать css и динамически генерировать имена классов на бэкэнде... таким образом, на бэкэнде вы добавите class="level1" (или "level2" или "level3" и т. д.) На основе вычисленного значения ячейки. Затем вы можете управлять отображением этих классов с помощью простого css.

вы можете настроить некоторые классы css:

.row { background-color: #00ff00; }
.alt { backgorund-color: #ff00ff; }

<table>
    <tr class="row">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
    <tr class="alt">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
</table>

опция jquery также проста, но именно так я бы сделал это честно.

HTH

поддерживать две переменные для самых высоких и самых низких значений в таблице.

добавьте функцию, которая вызывается при каждом изменении таблицы. Повторите каждую ячейку и пересчитайте самые высокие и самые низкие значения по мере необходимости, а затем с помощью оператора if (или чего-то подобного) переназначьте правильный цвет. Например, для каждой ячейки:

if(cellValue < minValue)
    minValue = cellValue;
else if(cellValue > maxValue)
    maxValue = cellValue;

var bracket = (cellValue - minValue) / (maxValue - minValue);

if(bracket < .2)
    // make the cell green
else if(bracket < .4)
    // make the cell green-yellow
else if(bracket < .6)
    // make the cell yellow

...и так далее. Но это очень грубая сила. Вероятно, вы можете найти способ оптимизировать процесс переназначения цветов на существующие клетки.