Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2020, 21:19
Новичок на форуме
Отправить личное сообщение для nikofedorov Посмотреть профиль Найти все сообщения от nikofedorov
 
Регистрация: 09.02.2020
Сообщений: 8

Условное форматирование td
Прошу помочь со скриптом, чтобы фон td красился условным форматированием, при этом не влезая в html(который расположен ниже) и чтобы class был одинаковый:
>=90 зеленый
>= 75 <90 желтый
>= 50 <75 красный
<50 серый

<td class="shop_spec_val">90</td>
<td class="shop_spec_val">30</td>
<td class="shop_spec_val">70</td>
<td class="shop_spec_val">80</td>


Соответственно результат должен быть:
90 - зеленый фон
30 - серый фон
70 - красный фон
80 - желтый фон
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2020, 21:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от nikofedorov
при этом не влезая в html
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2020, 21:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

цвет фона ячейки в зависимости от содержимого
nikofedorov,
если чуть чуть влезть
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .shop_spec_val {
      background-color: var(--bg, transparent)
  }

  </style>

  <script>
   document.addEventListener("DOMContentLoaded", _ =>
     document.querySelectorAll(".shop_spec_val")
     .forEach(({style: s, textContent: t}) => (t = Number(t),s.setProperty("--bg",
     t >= 90 ? "Green": t >= 75 ? "Yellow": t >= 50 ? "Red": "Gray")))
   );
  </script>
</head>
<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
            <th>Title 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
<td class="shop_spec_val">90</td>
<td class="shop_spec_val">30</td>
<td class="shop_spec_val">70</td>
<td class="shop_spec_val">80</td>

		</tr>
		<tr>
<td class="shop_spec_val">90</td>
<td class="shop_spec_val">30</td>
<td class="shop_spec_val">70</td>
<td class="shop_spec_val">80</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Последний раз редактировалось рони, 13.02.2020 в 21:56.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Форматирование даты adamenko.artem Общие вопросы Javascript 2 26.07.2013 11:33
Форматирование вводимого номера + 7 123 456-78-90 danik.js Элементы интерфейса 11 12.03.2012 00:22
Validator: условное правило Oleg NT jQuery 2 13.02.2010 19:32
Форматирование CSS cuberboy (X)HTML/CSS 5 08.08.2009 23:04
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55