Как залить часть ячейки таблицы? - JavaScript, Ajax

Stilet · 12.08.2009, 08:59

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

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

Как (и можно ли) это сделать на JS&?

SkyM@n · 12.08.2009, 11:09

Прогрессбар должен быть в виде цветного градиента или просто прямоугольник, залитый цветом (синим, например) в зависимости от значения?

Metandrostenalon · 12.08.2009, 12:17

Код:

<!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>

Stilet · 12.08.2009, 13:16

Цитата:

SkyM@n

Никакого градиента

Цитата:

Metandrostenalon

Сенькс. Идею понял

SkyM@n · 12.08.2009, 14:39

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

Код 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 ))

12.08.2009, 08:59	#1
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Как залить часть ячейки таблицы? Дано: Есь таблица, в каждой ячейке находятся цифры. Извесно что эи цифры в пределах от 0 до 8 Задача:Для красоты поместить в ячейку что-то а-ля прогрессбар, дабы показать процентное соотношение той цифры которой находится в ячейке от максимума. отрисовав в ячейке прямоугольник другим цветом, согласно проценту от числа в ячейке. Т.е. мне нужно знать ширину ячейки, а ведь она может меняться при изменении размера окна (таблица выставлена в 100%). Как (и можно ли) это сделать на JS&? I'm learning to live...

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

12.08.2009, 11:09	#2
SkyM@n Laravel/Vue expert Старожил Подтвердите свой е-майл Регистрация: 08.08.2007 Сообщений: 2,832	Прогрессбар должен быть в виде цветного градиента или просто прямоугольник, залитый цветом (синим, например) в зависимости от значения?