Раскраска таблицы
Есть желание раскрасить таблицу в зависимости от изменения значений в ячейке.
То есть, если вчера в ячейке стояло число 8 а сегодня 10 то, например в зеленый цвет Если вчера было 15 а сегодня 10 то в красный а если изменений не было то без всякой окраски. Для раскраски таблицы без сравнений с предыдущими значениями я использую prototype.js, но как сделать сравнительную раскраску никак не могу сообразить… Может кто подскажет какие соображения... |
Цитата:
|
для простой раскраски я подключаю скрипт и просто добавняю к нему следующий код
$(document).observe('dom:loaded', function()
{
var arr_class = ['range1','range2','range3'];
var abc_class = ['a', 'b', 'c'];
function table_colorize(elements, array_class)
{
elements.each(function(i, j)
{
var num = i.innerText || i.textContent;
var $class;
//if( parseInt(num) > '-10000000,00' && ParseInt(num) < '0,00')
if ("-" == num.substr(0,1)) $class = array_class[0];
//if ( (parseInt(num)-1) < 0.00 ) $class = array_class[0];
if (( num == '0')||( num == '0,00')||( num == null )) $class = array_class[1];
// if (num > '-10000000.00' && num < '0.0')
// $class = array_class[0];
// if (num > -10000000.00 && num < 0.0)
// $class = array_class[0];
// if (num == 0)
// $class = array_class[1];
i.addClassName($class);
}
);
};
var first = $$('table#first td');
var second = $$('table#second td');
table_colorize(first, arr_class);
table_colorize(second, abc_class);
}
);
.range1{background-color:#FEBEB4; font-weight: bold; COLOR: #3D5B96; }
.range2{COLOR: #008000;}
.range3{background-color:#FFFFAA;}
.a{background-color:#FFF000;}
.b{background-color:#FF0000;}
.c{background-color:#0000FF;}
этот код тоже не очень, так как я долго боролся чтобы он заработал, он какой-то капризный, одни числа воспринимал а другие нет, но при таком решении вроде работает... но он просто раскрашевает, а мне нужно раскрасить в зависимости от даных таблицы на предидущую дату... |
По моему значительно проще использовать к примеру .addClass и .removeClass. CSS классы формируем типа .a1, .a2, .a3.
Затем, первым делом выполняем функцию очистки от возможно установленных нами классов. А затем внедряем класс, к примеру так:
var col; // <----- переменная, в которой будет вычисленное значение нашего класса
$(id).addClass('a' + col);
Если я правильно понял |
но мы наперед не знаем где какое число будет...
|
Ну как же не знаем?
База или массив. Сравниваем вчера и сегодня. Изменения есть - красим, большие изменения (к примеру) - ваще не реально красим ;). Нет изменений не красим или убираем краски, если было покрашено. Если не база или массив. То в момент изменения проверяем. К примеру перехватываем ввод с клавиатуры, чтобы запомнить предыдущую цифру. |
| Часовой пояс GMT +3, время: 13:23. |