|
Закрашивание ячеек в таблице в зависимости от данных в ячейк
Добрый вечер.
Имеется вопрос, над которым бьюсь уже неделю. Имеется таблица 3 столбца и 3 строки. Т.Е. 9 ячеек. Эти ячейки заполнены числами. Можно ли сделать так, чтобы в зависимости от того, какое число в ячейке, ячейка закрашивалась определенным цветом. Например, если значение в ячейке = 1, то ячейка закрашивается в красный. А в другой ячейке значение = 8, и она закрашена в зеленый. Заранее благодарен за помощь. |
Цитата:
|
а как?
|
Цитата:
|
Нет не хитрый) Просто надо сделать, а как не знаю.) Вот и спрашиваю совета)
|
CSS: nth-child (не кроссбраузерно). Читать тут.
javascript:
<table id="t">
<td>1</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
</table>
<script>
arr= document.getElementById("t").getElementsByTagName("td");
colors= ["", "blue", "red", "green"];
for (var i=0; i!= arr.length; ++i) {
arr[i].style.background=colors[arr[i].innerHTML];
}
</script>
|
Спасибо за помощь)
|
Подскажите пожалуйста, есть функция, которая раскрашивает ячейки в таблице, в зависимости от значений ячейки. Как сделать так, что бы две таблицы раскрашивались по разным функциям. Вот пример, но он не работает((
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
$(document).observe('dom:loaded', function(){
var arr_class = ['range1','range2','range3'];
function table_colorize(elements, array_class)
{
elements.each(function(i, j){
var num = i.innerText || i.textContent;
var $class;
if(num > 1.5 && num < 5.5)
$class = array_class[0];
if(num > 5.4 && num <= 8.3)
$class = array_class[1];
if(num >= 9.0 || num <= 1)
$class = array_class[2];
i.addClassName($class);
});
};
var first = $$('table#first td');
table_colorize(first, arr_class);
});
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
$(document).observe('dom:loaded', function(){
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($R(10,30).include(num))
$class = arr_class[0];
if($R(40,60).include(num))
$class = arr_class[1];
if($R(70,90).include(num))
$class = arr_class[2];
i.addClassName($class);
});
};
var second = $$('table#second td');
table_colorize(second, abc_class);
});
</script>
</head>
<body>
<table id="obsh">
<tr>
<td>
<table id="first">
<tr>
<td>0.7</td>
<td>2.1</td>
<td>3.7</td>
</tr>
<tr>
<td>4.6</td>
<td>5.5</td>
<td>6.1</td>
</tr>
<tr>
<td>7.4</td>
<td>8.3</td>
<td>9.4</td>
</tr>
</table>
</td>
<td>
<table id="second">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
|
Если брать две таблицы, что бы их раскрашивало по одной функции, то вот рабочий пример.
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
$(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($R(1,30).include(num))
$class = array_class[0];
if($R(40,60).include(num))
$class = array_class[1];
if($R(70,90).include(num))
$class = array_class[2];
i.addClassName($class);
});
};
var first = $$('table#first td');
var second = $$('table#second td');
table_colorize(first, arr_class);
table_colorize(second, abc_class);
});
</script>
</head>
<body>
<table id="obsh">
<tr>
<td>
<table id="first">
<tr>
<td>0.7</td>
<td>2.1</td>
<td>3.7</td>
</tr>
<tr>
<td>4.6</td>
<td>5.5</td>
<td>6.1</td>
</tr>
<tr>
<td>7.4</td>
<td>8.3</td>
<td>9.4</td>
</tr>
</table>
</td>
<td>
<table id="second">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
|
Сделайте его запускаемым)
|
| Часовой пояс GMT +3, время: 23:06. |
|