Изменения цвета текста в ячейке таблицы
Здравствуйте!
Хочу изменить цвет текста в нескольких ячейках таблицы при помощи js. прочитал про dom и попытался сделать что-то такое: table.rows.item(1).cells.item(1).style.color но конечно же ничего не вышло (= как быть? |
Надо например, так: table.rows[3].style.backgroundColor = "red";
|
Или так: table.rows[4].cells[2].style.backgroundColor = 'blue';
|
Цитата:
|
eirnvn,
Поправте мой вариант пожалуста. Вот табличка. <body onload="Red();"> <table> <tr><td id = "red_num">100</td></tr> </table> </body> Функция.
function Red()
{
color_num = document.getElementById("red_num").innerHTML;// получает цифру из ячейки таблицы
if(color_num !=0)
{
document.getElementById("red_num").style.backgroundColor = "#FF0000";// Меняет цвет фона ячейки
}
}
Надо бы, чтобы менялся цвет цифры 100, а не фона ячейки. И ещё, чтобы переменная color_num - строго не ровнялась нулю. При таком варианте (color_num !==0) функция почему-то вообще не работает. p.s. Если можно, дайте ссылку, где об этом можно почитать подробнее. Только не на справочник по JS. Заранее спасибо. |
Цитата:
Цитата:
|
Цитата:
|
Разобрался...
Но, это работает если значение в ячейке статичное.
function Red()
{
color_num = parseFloat(document.getElementById("red_num").innerHTML);// Преобразовует строку в число
if(num !==0)
{
document.getElementById("red_num").style.color = "red";// Меняет чвет чила на красный
}
else
{
document.getElementById("red_num").style.color = "green";// Меняет чвет чила на зелёный
{
}
А, у меня значение выводится вот так. <body onload="Red();"> <table> <tr><td id = "red_num"><?=$item['schet'];?></td></tr>// Число выводится из массива циклом PHP </table> </body> И остаётся всё время красным.!?!? |
Ljubin, так у Вы уже определитесь, color_num или num? У Вас в if - num, но такой переменной нет.
function red() {
var elem = document.getElementById('red_num');
elem.style.color = +elem.innerHTML ? 'green' : 'red';
}
|
Запутался...
У себя я поменял названия переменных, а тут нет, ну чтоб... Короче, давайтека ещё раз. Таблица. <body onload="Show();"> <table> <?php foreach($card_pay_list as $item):?> <tr> <td><p class = "text"><?=$item['renta'];?></p></td> <td id = "num"><p class = "text"><?=$item['schet'];?></p></td>// Число выводится из массива циклом foreach PHP </tr> <?php endforeach;?> </table> </body> Стили CSS.
div#content p.text{/*текст в таблицах*/
font-family:sans-serif;
font-style:normal;
font-size:18px;
}
Функция работает если цифру указать явно. Если её вывести так как в примере выше, то цифра всегда красная.
function Show()
{
elem = parseFloat(document.getElementById("num").innerHTML);// Преобразовует строку в число
if(elem !==0)
{
document.getElementById("num").style.color = "red";// Меняет чвет числа на красный
}
else
{
document.getElementById("num").style.color = "green";// Меняет чвет числа на зелёный
}
}
Использовал эту функцию, результат тотже. Цифра всегда красдная.
function Show()
{
var elem = document.getElementById('num');
elem.style.color = +elem.innerHTML ? 'green' : 'red';
}
|
Ljubin,
id одинаковые? |
Ljubin,
да и в ячейке у вас теги помимо числа |
Да - точно тег <p></p> мешал.
Но тепер одинаковый id = "num" проблема. Который выводится у меня 32 раза.))) И работает только первый в списке. Надо бы написать другую функцию, где проходясь циклом FOR по всем ячейкам таблицы, проверять цифры и менять цвет взависимости от результата проверки. Погуглил и нашёл функцию и как мог переделал... Но она не работает после переделок.))) Прошу спецов помоч. Табличка <body onload="Show();"> <table id="Table"> <tr> <td>0</td> <td>1</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table> </body> Функция.
function Show()
{
var table = document.getElementById('Table');// id таблицы
var trList= table.getElementsByTagName('tr');
for (var i=0;i<trList.length;i++)
{
var tdList = trList[i].getElementsByTagName('td');
for (j=0;j<tdList.length;j++)
{
if(parseFloat(+tdList[j].innerHTML) !==0)// Если не ноль
{
+tdList[j].style.color = "red";
}
else
{
+tdList[j].style.color = "green";
}
if(parseFloat(+tdList[j].innerHTML) < 0)// Если меньше нуля
{
+tdList[j].style.color = "blue";
}
}
}
}
|
Ljubin,
изучайте селекторы и поиск элементов http://learn.javascript.ru/searching-elements-dom
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table>
<tr>
<td id = "num1"><p class = "text">2</p></td>
<td id = "num2"><p class = "text">0</p></td>
<td id = "num3"><p class = "text">2</p></td>
<td id = "num4"><p class = "text">2</p></td>
</tr>
</table>
<script>
var p = document.querySelectorAll('td p');
for (var i=0; i<p.length; i++) {
p[i].style.color = +p[i].innerHTML ? 'green' : 'red';
}
</script>
</body>
</html>
|
Да-а! Мощно...))
Буду учить - обязательно. Спасибо. |
| Часовой пояс GMT +3, время: 02:08. |