Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Раскраска таблицы (https://javascript.ru/forum/jquery/33584-raskraska-tablicy.html)

gudzik 28.11.2012 16:36

Раскраска таблицы
 
Есть желание раскрасить таблицу в зависимости от изменения значений в ячейке.

То есть, если вчера в ячейке стояло число 8 а сегодня 10 то, например в зеленый цвет
Если вчера было 15 а сегодня 10 то в красный а если изменений не было то без всякой окраски.

Для раскраски таблицы без сравнений с предыдущими значениями я использую prototype.js, но как сделать сравнительную раскраску никак не могу сообразить…

Может кто подскажет какие соображения...

ksa 28.11.2012 16:38

Цитата:

Сообщение от gudzik
как сделать сравнительную раскраску никак не могу сообразить…

Пока не понятен твой алкоритм окраски... Как и сама паллитра...

gudzik 28.11.2012 16:57

для простой раскраски я подключаю скрипт и просто добавняю к нему следующий код
$(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;}


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

skeef 28.11.2012 18:59

По моему значительно проще использовать к примеру .addClass и .removeClass. CSS классы формируем типа .a1, .a2, .a3.
Затем, первым делом выполняем функцию очистки от возможно установленных нами классов. А затем внедряем класс, к примеру так:
var col;  // <----- переменная, в которой будет вычисленное значение нашего класса
$(id).addClass('a' + col);

Если я правильно понял

gudzik 28.11.2012 19:20

но мы наперед не знаем где какое число будет...

skeef 28.11.2012 20:16

Ну как же не знаем?
База или массив.
Сравниваем вчера и сегодня. Изменения есть - красим, большие изменения (к примеру) - ваще не реально красим ;). Нет изменений не красим или убираем краски, если было покрашено.

Если не база или массив. То в момент изменения проверяем. К примеру перехватываем ввод с клавиатуры, чтобы запомнить предыдущую цифру.


Часовой пояс GMT +3, время: 13:53.