基于其中某些数据的 PHP/Javascript 颜色单元格答案

【问题标题】：PHP/Javascript Color cell based on certain data inside it基于其中某些数据的 PHP/Javascript 颜色单元格
【发布时间】：2018-10-05 07:03:52
【问题描述】：

我想知道是否可以根据单元格内部的某些数据为单元格着色。现在我生成了一个表格，其中一些数据在单元格内连接起来：

| 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 条数据放入一个单元格的方式是我只是将它们连接起来并将它们粘贴到一个单元格中。

【问题讨论】：

可以添加 HTML 吗？
您可以在编写字符串之前将背景颜色添加为 PHP 中的单元格类。除此之外，您正在谷歌上寻找“javascript string contains x”。 idownvotedbecau.se/noresearch

标签： javascript php html-table

【解决方案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>

【讨论】：