Question

我的页面有一个包含3列的表格，其中包括：

会员姓名
填写表格的必要条件
状态

第2列的值为＆＃34;是＆＃34;或＆＃34;否＆＃34;第3列可以有＆＃34;待定＆＃34;，＆＃34;开始＆＃34;或者＆＃34;完成＆＃34;值。

我想让第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列有一个值＆＃34;是＆＃34;为了强制性，否则它应该保持黑色。

有没有办法混合我的＆＃34;如果＆＃34;检查另一栏？

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

更改表格中的单元格颜色

1 个答案: