Форум

kolya200598 · #1 (**permalink**) 23.12.2017, 11:20

Здравствуйте. Помогите, пожалуйста, в решении такой задачи. Есть таблица. И в зависимости от содержимого ячейки закрасить ее нужным цветом. Например, все ячейки, в которых числа больше 5, закрасить зеленым цветом. А все, в которых меньше 0, желтым цветом. Заранее спасибо.

рони · #2 (**permalink**) 23.12.2017, 11:47

kolya200598,
ваши попытки где? проблема то в чём?

kolya200598 · #3 (**permalink**) 23.12.2017, 11:57

НЕ РАБОТАЕТ ТАК

<!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 = "blue";
}
for (var i=0; i>p.length; i++) {
p[i].style.color = "green";
}
</script>
</body>
</html>

рони · #4 (**permalink**) 23.12.2017, 11:58

kolya200598,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

kolya200598 · #5 (**permalink**) 23.12.2017, 12:02

<!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 = "blue";
   }
 for (var i=0; i>p.length; i++)  {
   p[i].style.color = "green";
   }	
</script>
</body>
</html>

рони · #6 (**permalink**) 23.12.2017, 12:04

kolya200598,

<!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++) {
 var num = +p[i].textContent;
 if(num  < 0 ) p[i].parentNode.style.backgroundColor = "#FFFF00";
 // if(num ....)

 }

 </script>
 </body>
 </html>

Форум

Справочник

Discord чат

Курсы javascript