Закрашивание ячеек в таблице в зависимости от данных в ячейк
Добрый вечер.
Имеется вопрос, над которым бьюсь уже неделю. Имеется таблица 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>
|
Сделайте его запускаемым)
|
trikadin,
Кстати, а как делать эти запускаемые примеры? |
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting |
Здравствуйте
Помогите пожалуйста мне нужно сделать что то типа прогрессбара из колонки таблицы. я в программирование новичок,сильно не пинайте. Задача закрашивать колонку в красный если 100% или если 50% то половина красная а половина прозрачная. |
Sergey and,
<style>
td { position:relative;
width:40px;
padding: 0px;
}
td div.back {position:absolute;
left:0px;
top:0px;
height:100%;
background-color:red;
z-index:-1;
}
</style>
<table border="1px">
<tr>
<td><div class="back"></div>0%</td>
<td><div class="back"></div>25%</td>
<td><div class="back"> </div>50%</td>
<td><div class="back"></div>75%</td>
<td><div class="back"></div>100%</td>
</tr>
</table>
<script>
var arr = document.querySelectorAll('td');
for(var i = 0;i < arr.length;i++) {
arr[i].firstChild.style.width = arr[i].innerText;
}
</script>
|
Dilettante_Pro,
Цитата:
|
рони,
Я вообще с большим трудом понял задачу. Если колонка - то 100% это что и от чего? |
Dilettante_Pro,
ждём подробности:) |
Что-то примерно так?
<style>
td { position:relative;
width:20px;
}
</style>
Процент<input type='text'/>
<table >
<tr>
<td>0%</td>
</tr>
<tr>
<td>25% </td>
</tr>
<tr>
<td>50% </td>
</tr>
<tr>
<td>75% </td>
</tr>
<tr>
<td>100% </td>
</tr>
</table>
<script>
document.querySelector('input').onchange = function() {
var percent = +this.value;
var arr = document.querySelectorAll('td');
for(var i = 0;i < arr.length ;i++) {
arr[i].style.backgroundColor = "white";
}
for(var i = 0;i < ((arr.length * percent) / 100) ;i++) {
arr[i].style.backgroundColor = "red";
}
}
</script>
|
вариант оформления. ТС, ау!!!
<style>
td { position:relative;
width:20px;
height:30px;
padding: 0px;
}
td div.back {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
</style>
Процент<input type='text'/>
<table>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="back"></div></td>
</tr>
</table>
<script>
document.querySelector('input').onchange = function() {
var percent = +this.value;
var arr = document.querySelectorAll('td');
for(var i = 0;i < arr.length ;i++) {
arr[i].firstChild.style.backgroundColor = "white";
}
for(var i = 0;i < ((arr.length * (percent - 5)) / 100) ;i++) {
arr[i].firstChild.style.backgroundColor = "red";
}
}
</script>
|
Спасибо за ответы и код.
Похоже как в 14 топике. Представляю так , но как сделать не знаю( таблица а в ней колонки. Размер колонки 10 х 100(для примера). Если в функцию приходит 1% то красным закрашен один ряд пикселей из 100 в колонке красным, если приходит 25% то закрашено 25 строк из 100. Вообщем вертикальный progressbar. Пока писал ответ уже ответили, уже почти. Для 100% много строк <td><div class="back"></div></td> сто штук придется писать. Хотелось бы одну <td></td> закрашивать в зависимости от% |
без дивов
<style>
td { position:relative;
width:20px;
height:10px;
padding: 0px;
}
</style>
Процент<input type='text'/>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<script>
document.querySelector('input').onchange = function() {
var percent = +this.value;
var arr = document.querySelectorAll('td');
for(var i = 0;i < arr.length ;i++) {
arr[i].style.backgroundColor = "white";
}
for(var i = 0;i < ((arr.length * (percent - 5)) / 100) ;i++) {
arr[i].style.backgroundColor = "red";
}
}
</script>
|
Можно сделать непрерывный progressbar? В этом коде получается кубиками с шагом 10% , а можно как-то сделать непрерывный с шагом 1% ?
|
Sergey and,
зачем вам таблица, может хватит одного div? |
На странице нужно будет 8 таких баров поместить, что-то типа музыкального индикатора. Как их ровно разместить без таблицы ? http://avtozvuk-info.ru/wp-content/u...ekvalayzer.jpg
|
Sergey and,
А если по принципу пост 14, только двигать вертикально? Тогда одна строка таблицы с 8 ячейками. Менять не ширину, а высоту дивов |
Сейчас возникла мысль если в колонке поместить DIV с красным фоном и менять его высоту от 0 до 100, так получиться?
|
Sergey and,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
display: flex;
width: 400px;
height: 200px;
}
.slider > div{
border: 1px #7CFC00 solid;
flex: 1;
background-color: #FF0000;
margin: 2px;
background-repeat: no-repeat;
transition: all 1.4s ease-in-out;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var d = $(".slider > div");
function f()
{
var el = d[Math.random()*d.length|0],
gradient = Math.random()*100|0 ;
$(el).css({"background-image" : "linear-gradient(#103810 "+gradient+"%, transparent "+gradient+"%)"});
window.setTimeout(f,200)
}
f()
});
</script>
</head>
<body>
<div class="slider">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
</body>
</html>
|
Спасибо.:thanks:
Как раз такое нужно было . |
Долго разбирался, но теперь понял как работает код. Спасибо.
подскажите пожалуйста еще. Сам скорее всего не придумаю как сделать. Хотелось бы еще на каждый эквалайзер вставить еще один прямоугольник. Прямоугольник разделен на два в центре зеленая линия 4px. эта линия появляется если задать 50% в центре. Верхний и нижний от линии квадратики зеленные и полупрозрачные, что-бы было видно за ними красную линию которую уже сделали. Можно один div закрасить тремя цветами ? Если у кого были магнитофоны не с круглой регулировкой а с бегуном?, бегунок хочу сделать. Код:
___ |
Sergey and,
тут нужен специалист по css ... |
Сильно сложно , у меня не получиться ?
|
Цитата:
|
Буду пробовать, опыта мало в этом деле Не знаю какой объект брать div table...
|
Sergey and,
Цитата:
Насчет регуляторов смотрите слайдеры. |
индикатор с регулятором
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<style>
td { position:relative;
width:20px;
height:150px;
padding: 0px;
}
.back {position:absolute;
left:0px;
bottom:0px;
width:100%;
background-color:red;
z-index:-1;
}
.slider { margin: 5px; height: 150px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function () {
$(".slider").slider({
orientation: "vertical",
min: 0,
max: 100,
step: 10,
value: 50
});
var rows = $('tr'),
lights = rows.find('.back'),
slides = rows.find('.slider'),
currHeight;
function loop() {
for (var i = 0; i < lights.length; i++) {
currHeight = Math.random() * $(slides[i]).slider('values',0);
$(lights[i]).css('height', currHeight + "%");
}
setTimeout(loop, 200);
}
loop();
})
</script>
</head>
<body>
<table border="1px">
<tr>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
<td><div class="back"></div></td>
</tr>
<tr>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
<td><div class="slider"></div></td>
</tr>
</table>
</body>
</html>
|
Благодарю. :thanks: :thanks:
|
У меня тоже немного схожий вопрос...
А как сделать так, чтоб закрашивались только те ячейки таблицы, которые заполнены, а пустые ячейки таблицы не закрашивались?
<table border="1" id="row">
<tr>
<td width="20" height="20"></td>
<td width="20" height="20"></td>
<td width="20" height="20">2</td>
<td width="20" height="20"></td>
</tr>
</table>
<script>
arr= document.getElementById("row").getElementsByTagName("td");
colors= "red";
window.onload = function () {
for (var i=0; i!= arr.length; ++i) {
if (typeof arr[i] !== "") {
arr[i].style.background=colors;
}
}
}
</script>
|
<table border="1" id="row">
<tr>
<td width="20" height="20"></td>
<td width="20" height="20"></td>
<td width="20" height="20">2</td>
<td width="20" height="20"></td>
</tr>
</table>
<script>
window.onload = function () {
arr= document.getElementById("row").getElementsByTagName("td");
colors= "red";
for (var i=0; i!= arr.length; ++i) {
if (typeof arr[i] !== "" && arr[i].innerHTML != "") {
arr[i].style.background=colors;
}
}
}
</script>
|
Пупел,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td:empty{
background-color: #FFFFFF;
}
td{
background-color: #FF0000;
}
</style>
</head>
<body>
<table border="1" id="row">
<tr>
<td width="20" height="20"></td>
<td width="20" height="20"></td>
<td width="20" height="20">2</td>
<td width="20" height="20"></td>
</tr>
</table>
</body>
</html>
|
Спасибо! Вопрос исчерпан)
|
| Часовой пояс GMT +3, время: 12:42. |