|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
12.08.2009, 08:59 | #1 |
Белик Виталий :)
Старожил
Регистрация: 23.07.2007
Сообщений: 57,097
|
Как залить часть ячейки таблицы?
Дано: Есь таблица, в каждой ячейке находятся цифры. Извесно что эи цифры в пределах от 0 до 8
Задача:Для красоты поместить в ячейку что-то а-ля прогрессбар, дабы показать процентное соотношение той цифры которой находится в ячейке от максимума. отрисовав в ячейке прямоугольник другим цветом, согласно проценту от числа в ячейке. Т.е. мне нужно знать ширину ячейки, а ведь она может меняться при изменении размера окна (таблица выставлена в 100%). Как (и можно ли) это сделать на JS&?
I'm learning to live...
|
12.08.2009, 11:09 | #2 |
Laravel/Vue expert
Старожил Подтвердите свой е-майл
Регистрация: 08.08.2007
Сообщений: 2,832
|
Прогрессбар должен быть в виде цветного градиента или просто прямоугольник, залитый цветом (синим, например) в зависимости от значения?
|
12.08.2009, 12:17 | #3 |
Форумчанин
Регистрация: 03.04.2009
Сообщений: 108
|
Код:
php,javascript
|
12.08.2009, 13:16 | #4 | ||
Белик Виталий :)
Старожил
Регистрация: 23.07.2007
Сообщений: 57,097
|
Цитата:
Цитата:
I'm learning to live...
|
||
12.08.2009, 14:39 | #5 |
Laravel/Vue expert
Старожил Подтвердите свой е-майл
Регистрация: 08.08.2007
Сообщений: 2,832
|
Вот тут набросал по-быстрому визуальный пример. Кстати, если ставить большие значения в таблице, то надо еще делать скриптом автоматический ресайз всех ячеек.
Вот собсно код: Код HTML:
maxVal = 8; // Входные данные - задается вручную progressValues = ["#FF0000", "#FF2500", "#FF4500", "#FF6500", "#FF8C00", "#FFA500", "#FFD700", "#FFFF00", "#ADFF2F", "#7CFC00", "#00FF00"]; //массив цветов прогрессбара $(function(){ //когда DOM документа загрузился $('table#matrix tbody tr td').css("width", parseInt(100 / $('table#matrix tbody tr td').length) + "%"); //автоматический ресайз ячеек $('table#matrix tbody tr').each(function() { //перебор всех строк таблицы var row = $(this); //берем текущую строку для дальнейшей манипуляции с ней $('td', row).each(function(cell) { //перебор каждой ячейки в строке var bgVal = parseInt( progressValues.length / maxVal * parseFloat($(this).text())); //"черновое значение" (может быть вне массива цветов прогрессбара) вычисленного бэкграунда прогрессбара var wdVal = parseInt( 100 / maxVal * parseInt($(this).text())); //"черновое значение" (может быть больше 100 или менше 0) вычисленной ширины прогрессбара $("<div></div>").css({ //создаем DIV-прогрессбар на лету, который будет фоном height: "10px", //высота прогрессбара backgroundColor: progressValues[ (bgVal < progressValues.length) ? bgVal : progressValues.length - 1 ], //бэкграунд прогрессбара, если значение больше кол-ва эллементов массива цветов, то используется последний цвет width: ( wdVal <= 100 ? ((wdVal > 0) ? wdVal : 0) : 100 ) + '%' //ширина прогрессбара (полоски) , если значение больше 100%, то сбрасываем на 100%, если меньше 0, то сбрасываем на 0 }).appendTo($(this)).wrap("<div></div>").parent("div").css({ // добавляем к текущей ячейке и обрамляем еще одним DIVом, который будет рамкой прогрессбара border: "1px solid #777" //толщина, тип и цвет рамки }); }); }); }) </script> <table id="matrix"> <tr> <td>3</td> <td>5</td> <td>6</td> <td>-11</td> </tr> <tr> <td>0</td> <td>8000000000</td> <td>7</td> <td>6</td> </tr> <tr> <td>5</td> <td>170</td> <td>8</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>4</td> <td>25</td> </tr> </table> Пусть также это будет примером к использованию jQuery )) Последний раз редактировалось SkyM@n; 12.08.2009 в 14:42. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как залить сектора окружности? | ai\ekcah^p | Помощь студентам | 1 | 05.05.2009 16:49 |
Скопировать выделенную часть ячейки! | nikolai_P | Microsoft Office Excel | 8 | 05.05.2009 12:27 |
Уплотнить часть таблицы функции (Delphi) | FireHawK | Помощь студентам | 0 | 05.05.2009 12:13 |
как скопировать часть объединенной ячейки? | Азамат | Microsoft Office Excel | 20 | 14.07.2008 22:50 |
Как вытащить только часть символов из ячейки? | Berkley | Microsoft Office Excel | 5 | 22.12.2006 00:43 |