Закрасить ячейку таблицы
Здравствуйте. Помогите, пожалуйста, в решении такой задачи. Есть таблица. И в зависимости от содержимого ячейки закрасить ее нужным цветом. Например, все ячейки, в которых числа больше 5, закрасить зеленым цветом. А все, в которых меньше 0, желтым цветом. Заранее спасибо.
|
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++) { p[i].style.color = "blue"; } for (var i=0; i>p.length; i++) { p[i].style.color = "green"; } </script> </body> </html> |
kolya200598,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<!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>
|
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>
|
| Часовой пояс GMT +3, время: 18:57. |