Изменение фона ячейки таблицы в зависимости от значения

Question

Мой сайт читает XML-файл, содержащий информацию (значения) для таблицы данных. Я использую CSS для создания таблицы, и все работает нормально.

Чтобы получить лучший пользовательский опыт, я задался вопросом, можно ли динамически менять цвет фона каждой ячейки в зависимости от его значения?

Например:

Каждая ячейка, которая содержит ряд менее «5» имеет красный цвет фона;

каждая ячейка> = "5" имеет зеленый цвет фона.

Моим первым решением является использование Javascript - но я хочу знать, есть ли способ решить это только с помощью CSS-стилей?

Answer 1

Это невозможно с только CSS (хотя вы можете использовать JavaScript, чтобы назначить классы, чтобы частично реализовать его с помощью CSS). Чтобы использовать обычный JavaScript, а не библиотеки:

var table = document.getElementById('tableID'); 
var tbody = table.getElementsByTagName('tbody')[0]; 
var cells = tbody.getElementsByTagName('td'); 

for (var i=0, len=cells.length; i<len; i++){ 
    if (parseInt(cells[i].innerHTML,10) > 5){ 
     cells[i].style.backgroundColor = 'red'; 
    } 
    else if (parseInt(cells[i].innerHTML,10) < -5){ 
     cells[i].style.backgroundColor = 'green'; 
    } 
} 

JS Fiddle demo.

Или использовать классы CSS:

var table = document.getElementById('tableID'); 
var tbody = table.getElementsByTagName('tbody')[0]; 
var cells = tbody.getElementsByTagName('td'); 

for (var i=0, len=cells.length; i<len; i++){ 
    if (parseInt(cells[i].innerHTML,10) > 5){ 
     cells[i].className = 'red'; 
    } 
    else if (parseInt(cells[i].innerHTML,10) < -5){ 
     cells[i].className = 'green'; 
    } 
} 

JS Fiddle demo.

Ссылки:

• className.
• getElementById().
• getElementsByTagName().
• innerHTML.
• parseInt().
• style.

Answer 2

Не уверен css.I'll прыгать прямо в JQuery

$('#mytable tr td').each(function(){ 
    if($(this).text() > 5)$(this).css('background-color','red'); 
}); 

Answer 3

Это может быть возможным сделать это с помощью выражений CSS, но это не является стандартным и IIRC работает только в Internet Explorer. Поэтому я бы посоветовал это сделать.

Выполнение этой серверной или с использованием JavaScript - ваши лучшие ставки.

Answer 4

без петли вы можете сделать это таким образом

вар VAL = "и далее";

$ ("# grid td: содержит ('" + val + "')"). Css ('background-color', 'red');