Форум

nikofedorov · #1 (**permalink**) 13.02.2020, 21:19

Прошу помочь со скриптом, чтобы фон 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

Сообщение от nikofedorov

при этом не влезая в html

рони · #3 (**permalink**) 13.02.2020, 21:27

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>

Форум

Справочник

Discord чат

Курсы javascript