Изменить цвет фона в зависимости от значения

Question

Я использую таблицы Google, значение, где данные имеют вид:

<tr class="google-visualization-table-tr-even">
  <td class="google-visualization-table-td">TC-206</td>
  <td class="google-visualization-table-td">Customer logs in</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
</tr>

<tr class="google-visualization-table-tr-odd">
  <td class="google-visualization-table-td">TC-207</td>
  <td class="google-visualization-table-td">Customer signs out</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
  <td class="google-visualization-table-td">Pass</td>
</tr>

Таким образом, значение таблицы продолжает увеличиваться, то есть tr и td продолжают увеличиваться в зависимости от выполнения тестаи количество тестов.

Так что я хотел бы внести изменения, если td value is Pass, the background colour should be green and if its fail, it should be red.

я попробовал как

var table1 = document.getElementsByClassName('google-visualization-table-td');
var key = table1.value;

for (key in table1) {
  if(key != "Pass"){
    key.bgColor='#800000';
  } 
}; 

Но не повезло !!

Как это возможно.Пожалуйста, помогите.

Answer 1

Таким образом, в качестве предостережения, чтобы сделать это с помощью javascript, вы уже добавляете тег стиля в каждую ячейку, который будет переоценивать и рисовать каждую независимо, как вы говорите, например, добавление новых строк и т. Д., Которые также потребуютзапускать этот метод каждый раз.

Другим вариантом, который следует рассмотреть, является селектор CSS, который не нуждается в обновлении, и он будет обрабатывать проблему, не добавляя новый тег стиля в каждую ячейку, который становится чем-то вродедобавлен атрибут data-whatever="<value>" против style="background-color: <colorThatWillBeConvertedToRGBAutomatically>" для каждой ячейки.

Так что просто опция без js;

// Nope.

[data-tag=Pass] {
  background-color: green;
}

[data-tag=Fail] {
  background-color: red;
}

<table>
  <tr class="google-visualization-table-tr-even">
  <td class="google-visualization-table-td" data-tag="TC-206">TC-206</td>
  <td class="google-visualization-table-td" data-tag="Customer logs in">Customer logs in</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>

  <tr class="google-visualization-table-tr-odd">
  <td class="google-visualization-table-td" data-tag="TC-207">TC-207</td>
  <td class="google-visualization-table-td" data-tag="Customer signs out">Customer signs out</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Fail">Fail</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td>
  <td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
</table>

Answer 2

Вы можете добавить прослушиватель, если пользователь может добавлять или удалять элементы в таблице или если вы сами управляете таблицей, вы можете просто добавить этот код в свои функции управления, такие как добавление или удаление: -

var x = document.getElementsByClassName("google-visualization-table-td");
for (i = 0; i < x.length; i++) {
    if(x[i].innerText === 'Pass')
        x[i].style.backgroundColor = "green";
    else if(x[i].innerText === 'Fail')
        x[i].style.backgroundColor = "red";
}

Answer 3

• .forEach ваш HTMLTable .rows
• .forEach ваш HTMLRow .cells
• Получить содержимое каждой ячейки cell.textContent.trim().toLowerCase()
• Если содержимоелибо pass|fail добавить is-[pass|fail] имя класса

[...document.getElementById("google-visualization").rows].forEach( row =>
  [...row.cells].forEach( cell => {
       const cont = cell.textContent.trim().toLowerCase();
       if (/^(pass|fail)$/.test(cont)) {
          cell.classList.add(`is-${cont}`);
       }
  })
);

.is-pass{background: green;}
.is-fail{background: red;}

<table id="google-visualization">
  <tr class="google-visualization-table-tr-even">
    <td class="google-visualization-table-td">TC-206</td>
    <td class="google-visualization-table-td">Customer logs in</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>
  <tr class="google-visualization-table-tr-odd">
    <td class="google-visualization-table-td">TC-207</td>
    <td class="google-visualization-table-td">Customer signs out</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>
</table>

Очевидно, что лучшим способом было бы назначить класс fail или pass при создании и стиле элементов с использованием CSS вместо использования JSпетли.

Answer 4

Вы не используете правильный для цикла .
Ознакомьтесь с этой документацией (MDN) .

Также с помощью element.value будетвернуть значение attribute value, а не текстовое содержимое.

Следующий код должен помочь.

var elements = document.getElementsByClassName('google-visualization-table-td');

for (var i = 0; i < elements.length; i++) {
  var value = elements[i].innerText || elements[i].textContent;
  
  if (value === 'Fail') {
    elements[i].style.backgroundColor = '#FF0000';
  } else if (value === 'Pass') {
    elements[i].style.backgroundColor = '#00FF00';
  }
}

td {
  display: block;
  border: solid 1px #CCC;
}

<table>
  <tr class="google-visualization-table-tr-even">
    <td class="google-visualization-table-td">TC-206</td>
    <td class="google-visualization-table-td">Customer logs in</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>

  <tr class="google-visualization-table-tr-odd">
    <td class="google-visualization-table-td">TC-207</td>
    <td class="google-visualization-table-td">Customer signs out</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Fail</td>
    <td class="google-visualization-table-td">Pass</td>
    <td class="google-visualization-table-td">Pass</td>
  </tr>
</table>