Раскраска таблицы
Есть желание раскрасить таблицу в зависимости от изменения значений в ячейке.
То есть, если вчера в ячейке стояло число 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:53. |