javascript - 更改表格中的单元格颜色

Question

我的页面有一个包含 3 列的表格，它们是:

1. 成员(member)姓名
2. 必须填写表格
3. 状态

第 2 列的值为"is"或“否”，第 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 列的值为"is"时强制，否则它应该保持黑色。

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

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>

Working fiddle