Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 12.08.2009, 08:59   #1
Stilet
Белик Виталий :)
Старожил
 
Аватар для Stilet
 
Регистрация: 23.07.2007
Сообщений: 57,840
По умолчанию Как залить часть ячейки таблицы?

Дано: Есь таблица, в каждой ячейке находятся цифры. Извесно что эи цифры в пределах от 0 до 8

Задача:Для красоты поместить в ячейку что-то а-ля прогрессбар, дабы показать процентное соотношение той цифры которой находится в ячейке от максимума. отрисовав в ячейке прямоугольник другим цветом, согласно проценту от числа в ячейке. Т.е. мне нужно знать ширину ячейки, а ведь она может меняться при изменении размера окна (таблица выставлена в 100%).

Как (и можно ли) это сделать на JS&?
I'm learning to live...
Stilet вне форума Ответить с цитированием
Старый 12.08.2009, 11:09   #2
SkyM@n
Laravel/Vue expert
Старожил Подтвердите свой е-майл
 
Аватар для SkyM@n
 
Регистрация: 08.08.2007
Сообщений: 2,832
По умолчанию

Прогрессбар должен быть в виде цветного градиента или просто прямоугольник, залитый цветом (синим, например) в зависимости от значения?
SkyM@n вне форума Ответить с цитированием
Старый 12.08.2009, 12:17   #3
Metandrostenalon
Форумчанин
 
Регистрация: 03.04.2009
Сообщений: 108
По умолчанию

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
function foo()
{
  var table = document.getElementById('test_table');
  var tr = table.getElementsByTagName('tr');
  var tr_length = tr.length;
  var max_value = 8;
  
  for (var i = 0; i < tr_length; i++) {
    var td = tr[i].getElementsByTagName('td');
    var td_length = td.length;
	
    for (var j = 0; j < td_length; j++) {
      var div = td[j].getElementsByTagName('div');
      var div_length = div.length;
	  
      for (var k = 0; k < div_length; k++) {
        div[k].style.background = '#000000';
        div[k].style.color = '#ffffff';
        div[k].style.width = parseInt(div[k].innerHTML / max_value * 100) + '%';
      }
    }
  } 
}
</script>
</head>
<body onload="foo()">

<table width="100%" id="test_table">
  <tr>
    <td><div>1</div></td>
    <td><div>4</div></td>
    <td><div>8</div></td>
  </tr>
</table>

</body>
</html>
Metandrostenalon вне форума Ответить с цитированием
Старый 12.08.2009, 13:16   #4
Stilet
Белик Виталий :)
Старожил
 
Аватар для Stilet
 
Регистрация: 23.07.2007
Сообщений: 57,840
По умолчанию

Цитата:
SkyM@n
Никакого градиента
Цитата:
Metandrostenalon
Сенькс. Идею понял
I'm learning to live...
Stilet вне форума Ответить с цитированием
Старый 12.08.2009, 14:39   #5
SkyM@n
Laravel/Vue expert
Старожил Подтвердите свой е-майл
 
Аватар для SkyM@n
 
Регистрация: 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.
SkyM@n вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как залить сектора окружности? 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 01:43


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS