javascript - 在文本内容的基础上应用 CSS 样式？

Question

我正在制作一个用于管理我的个人任务的应用程序，作为其中的一部分，我正在使用从 MySQL 数据库获取行的 PHP 填充一个表。然而，由于有许多任务被返回并且每个任务都有一个状态，我想更容易地为每个任务的状态应用不同的颜色样式，即红色代表待处理，黄色代表进行中等等，所以我可以很容易地找到他们。但是，我似乎无法理解如何动态地执行此操作，如下所示:

1. Check contents of the status cell.
2. Apply style on the basis of contents.
3. Move to next cell in status column.
4. Move to step 1.

这是使用 CSS 还是 Javascript 完成的？我猜是 Javascript，但我不知道从哪里开始。

Answer 1

在 php 中，您可以str_replace() status 字段中的空格和连字符来生成元素类并具有一组匹配的 css 规则

PHP 模板:

<div class="<?= str_replace(' ', '-', $row->status);?>">

CSS

div.pending{ color:yellow }
div.in-progress{ color:orange }