2

Есть таблица, в ней коэффициенты, которые приминают значения от 0,1 до 1. Задача в том, чтобы поменять цвет коэффициента при достижении определённого значения. Например: 0,1-0,49 - красный; 0,5-1 - зелёный. Спасибо!

<table class="ratio_table">
  <tbody>
    <tr>
      <td>1,00</td>
      <td>0,80</td>
      <td>1,00</td>
      <td>0,67</td>
    </tr>
    <tr>
      <td>1,00</td>
      <td>1,00</td>
      <td>0,50</td>
      <td>0,50</td>
    </tr>
    <tr>
      <td>0,75</td>
      <td>1,00</td>
      <td>0,45</td>
      <td>0,75</td>
    </tr>
    <tr>
      <td>1,00</td>
      <td>0,85</td>
      <td>0,58</td>
      <td>0,64</td>
    </tr>
    <tr>
      <td>1,00</td>
      <td>0,85</td>
      <td>0,75</td>
      <td>0,90</td>
    </tr>
    <tr>
      <td>0,94</td>
      <td>0,89</td>
      <td>0,69</td>
      <td>0,74</td>
    </tr>
  </tbody>
</table>

2
  • Приведите html-код таблицы в вопросе. 28 мар 2018 в 15:54
  • Добавил таблицу. Задача в том, чтобы скриптом дать цвет текста в зависимости от значения.
    – Стас
    28 мар 2018 в 17:18

1 ответ 1

4

Единственное, пришлось все запятые заменить на точки, что-бы не строить костыли

Если я правильно понял вопрос из комментария и первый <tr> в каждом <td> не является цифрой, то можно так...

[...document.querySelectorAll('td')].forEach((s, i) => {
  if (Number(s.innerHTML) < 0.5 && Number(s.innerHTML) !== isNaN) {
    s.style.color = 'red';
  } else if (Number(s.innerHTML) >= 0.5 && Number(s.innerHTML) !== isNaN) {
    s.style.color = 'green';
  } else {
    /*Если желтый не нужен, просто этот блок else удалить*/
    s.style.color = 'yellow';
  }
})
html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #272727;
}
<table class="ratio_table">
  <tbody>
    <tr>
      <td>Эту строку пропустить</td>
      <td>1.00</td>
      <td>0.40</td>
      <td>1.00</td>
      <td>0.47</td>
    </tr>
    <tr>
      <td>Эту строку пропустить</td>
      <td>1.00</td>
      <td>0.40</td>
      <td>1.00</td>
      <td>0.47</td>
    </tr>
    <tr>
      <td>Эту строку пропустить</td>
      <td>1.00</td>
      <td>0.40</td>
      <td>1.00</td>
      <td>0.47</td>
    </tr>
  </tbody>
</table>

Вариант для IE (** Проверенно только на IE-11 **)

var td = document.querySelectorAll('td');
for (let i = 0; i < td.length; i++) {
  if (Number(td[i].innerHTML) < 0.5 && Number(td[i].innerHTML) !== isNaN) {
    td[i].style.color = 'red';
  } else if (Number(td[i].innerHTML) >= 0.5 && Number(td[i].innerHTML) !== isNaN) {
    td[i].style.color = 'green';
  }
}
html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #272727;
}
<table class="ratio_table">
  <tbody>
    <tr>
      <td>Эту строку пропустить</td>
      <td>1.00</td>
      <td>0.40</td>
      <td>1.00</td>
      <td>0.47</td>
    </tr>
    <tr>
      <td>Эту строку пропустить</td>
      <td>1.00</td>
      <td>0.40</td>
      <td>1.00</td>
      <td>0.47</td>
    </tr>
    <tr>
      <td>Эту строку пропустить</td>
      <td>1.00</td>
      <td>0.40</td>
      <td>1.00</td>
      <td>0.47</td>
    </tr>
  </tbody>
</table>

4
  • Спасибо! Простите за наглость, но как указать скрипту, чтобы он пропускал первый td в каждом tr. Там обозначение коэффициентов.
    – Стас
    28 мар 2018 в 18:23
  • Обновил ответ, глянь...
    – Air
    28 мар 2018 в 19:16
  • Спасибо! Как множество условий поставить разобрался, а вот за && Number(s.innerHTML) !== isNaN) снимаю шляпу.
    – Стас
    28 мар 2018 в 19:37
  • Всегда пожалуйста... Рад был помочь...
    – Air
    28 мар 2018 в 19:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.