更改表格中的单元格颜色

Question

我的页面有一个包含3列的表格，分别是：

1. 成员名字
2. 必须填写表格
3. 状态

第2列的值为“是”或“否”，第3列的值为“待处理”，“开始”或“完成”。

我想根据状态更改第3列中文本的颜色，因此我做了以下js。

$("td[headers ='STATUS']").each(function () {
   if($(this).text() == 'Pending'){
       $(this).css("color", "red");
   }
   else if($(this).text() == 'Finished'){
      $(this).css("color", "green");
   }
   else if($(this).text() == 'Started'){
      $(this).css("color", "#B8B800");
   };
});

它按预期工作。 但是，现在我只想更改列3的颜色，当列2的值必须为“是”时，否则应该保持黑色。

有没有办法混合我的“如果”来检查另一列？

Answer 1

我将改变我的概念，使其在行上而不是在所有单元格上运行，并“每行”进行检查。

它将是这样的：

JS：

    $(function () {
    $("tbody tr").each(function () {
        var cols = $(this).children("td");
        if ($(cols[1]).text() == "Yes") {
            var statusEle = $(cols[2]);
            switch (statusEle.text()) {
                case 'Pending':
                    statusEle.css("color", "red");
                    break;
                case 'Finished':
                    statusEle.css("color", "green");
                    break;
                case 'Started':
                    statusEle.css("color", "#B8B800");
                    break;
            }
        }
    });
});

HTML：

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Is Obligated</th>
        <th>Status</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>John</td>
        <td>Yes</td>
        <td>Single</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>No</td>
        <td>Pending</td>
    </tr>
    <tr>
        <td>CRAP</td>
        <td>Yes</td>
        <td>Pending</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Yes</td>
        <td>Finished</td>
    </tr>
</tbody>

工作提琴