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

我正在制作一个用于管理我的个人任务的应用程序，作为其中的一部分，我正在使用PHP填充一个表，该表从MySQL数据库中获取行。但是，由于返回了许多任务，并且每个任务都有一个状态，因此我希望能够更轻松地将不同颜色的样式应用于每个任务的状态，即红色表示待定，黄色表示进行中，等等，以便我可以轻松找到它们。然而，我似乎无法理解我将如何动态地进行此操作，如：

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，但我不知道从哪里开始。

在php中，您可以使用连字符

str_replace（）

状态字段中的空格来生成元素类并具有一组匹配的css规则

PHP模板：

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

---

使用依赖于

状态

@charlietfl的css类。您能详细说明一下吗？您用什么语言呈现html？状态是表格的一列，从数据库中获取，只是为了清楚，其中有文本说明任务是否完成，正在进行或挂起。我将根据状态设置一个类：

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