PHP / Javascript Цветная ячейка на основе определенных данных внутри нее

Question

Мне было интересно, можно ли покрасить ячейку на основе определенных данных внутри нее. Прямо сейчас я сгенерировал таблицу с некоторыми данными внутри ячеек, объединенных как:

| Person   | Info                             |
|----------|----------------------------------|
| Person A |  Available                       |
|          |   Age: 10                        |
|          |   Weight: 110                    |
|          |----------------------------------|
| Person B |  Unavailable                     |
|          |  Age: 15                         |
|          |  Weight: 150                     |
|          |----------------------------------|
| Person C |  Available                       |
|          |  Age: 30                         |
|          | Weight: 180                      |

По сути, сейчас у меня был код javascript, который раскрашивал его, когда единственное значение внутри было Доступно или Недоступно

        var table = document.getElementById('table');
        var tbody = table.getElementsByTagName('tbody')[0];
        var cells = tbody.getElementsByTagName('td');
        console.log(typeof cells[7].innerHTML);
        for (var i=0, len=cells.length; i<len; i++){
            if (cells[i].innerHTML === "Available"){
                cells[i].style.backgroundColor = '#01CC00';
            }
            else if (cells[i].innerHTML === "Unavailable"){
                cells[i].style.backgroundColor = '#FF9800';
            }
        }

Что я не смог найти, так это то, могу ли я как-то изменить цвет, если данные содержат Доступен или Недоступен? То, как эти 3 фрагмента данных помещаются в ячейку, это то, что я просто объединяю их и помещаю в ячейку.

Любая помощь приветствуется, спасибо продвинутым парням!

Answer 1

Вот пример кода, показывающий, как добавить класс в каждую ячейку на основе исходных данных:

$data = [
    [true, 10, 110],
    [false, 15, 150],
    [true, 30, 180]
];

foreach ($data as $key => $row) {
    // compose text part
    $av = ($row[0] ? "A" : "Una") . "vailable";
    // use it for the cell's class:
    $class = strtolower($av);
    $age = $row[1]; $weight = $row[2];
    // insert class
    $td = "<td class='$class'>$av<br>Age: $age<br>Weight: $weight</td>";
    $x = chr($key + 65);
    echo "<tr><td>Person $x</td>$td</tr>\n";
}

Вот вывод и некоторые основные CSS:

td {
  padding: 0 10px;
}

td.available {
  background-color: #01CC00
}

td.unavailable {
  background-color: #FF9800
}

<table>
  <tr>
    <td>Person A</td>
    <td class='available'>Available<br>Age: 10<br>Weight: 110</td>
  </tr>
  <tr>
    <td>Person B</td>
    <td class='unavailable'>Unavailable<br>Age: 15<br>Weight: 150</td>
  </tr>
  <tr>
    <td>Person C</td>
    <td class='available'>Available<br>Age: 30<br>Weight: 180</td>
  </tr>
</table>