условное форматирование ячеек таблицы html

Question

Есть ли какие-либо готовые решения для условного форматирования таблиц HTML?

При условном форматировании меня больше интересует наличие разных цветов в качестве фона ячейки в зависимости от значения (числового) этого или некоторыхдругой столбец (в той же таблице).

Что-то похожее на то, что мы имеем в excel Условное форматирование -> Цветовые шкалы -> Красный Желтый Зеленый.Я хочу реализовать это в таблице, которая динамически генерируется с помощью JSP.

Есть ли для этого какие-либо решения JavaScript / jquery или JSP?

Answer 1

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]);
                    }
                }
            });
       });

Answer 2

Мой первый пример - следующая структура таблицы:

<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 .

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

Answer 3

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

Answer 4

Я сделал то же самое, что и ZDYN и Дэвид, но более математически проверенным способом.

После того, как мои динамические значения рассчитаны, я начинаю вычислять процентили для столбцов, которые я хочу раскрасить, используя

(L / N) * 100
где: L => Количество элементов за вычетом значения, для которого рассчитывается процентиль
N => Общее количество предметов

Теперь, в зависимости от процентиля, который я получаю из приведенных выше расчетов, соответствующие цвета назначаются для использования при отображении таблицы.
Благодаря такому подходу я получаю гибкость в использовании разных цветовых палитр на разных уровнях детализации.
Например, я могу использовать красный для процентиля в диапазоне от 0-5 в одном случае и 0-10 в другом. Все эти части могут быть гибко закодированы, так как все вышеперечисленные шаги выполняются на бэкэнде. (на Java)

Answer 5

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

Добавить функцию, которая вызывается при каждом изменении таблицы. Выполните итерацию по каждой ячейке и при необходимости пересчитайте самое высокое и самое низкое значения, а затем с помощью оператора 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

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

Answer 6

Вы можете настроить некоторые классы 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 также проста, но я честно так и сделаю.