根據表格單元格的值更改行的顏色

Question

我正在嘗試更改表格行的顏色，如果單元格中包含該行中的某些文本。 例如，如果單元格的值為“失敗”，則行將變為紅色。 但是只有一行正在按照其應有的方式運行。

這是我的代碼。

CSS：

<style>    
   .failed {
       background: red !important;
       color: white !important;
   }
</style>

HTML：

<table class="table table-striped">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Session Eamil</th>
            <th>Login Url</th>
            <th>Date</th>
            <th>Status</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @{ var counter = 1;}
            @foreach (var item in Model)
            {
                <tr>
                    <td class="text-center">@counter</td>
                    <td>@item.SessionEmail</td>
                    <td>@item.LoginUrl</td>
                    <td>@item.CreatedAt.ToLocalTime().ToString("G")</td>
                    <td>@item.Status</td>
                    <td class="text-center">
                        <a href='@Url.Action("JobDetail","ArchivedScrapeJob", new{jobId=item.Id})'><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></a>
                    </td>
                </tr>
        counter++;
            }
    </tbody>
</table>

JS代碼：

<script>
    $(function() {

        $(".table-striped").find("tr").each(function () {
            $("td").filter(function() {
                return $(this).text() === "Failed";
            }).parent().addClass("failed");
        });
    });
</script>

我要完成的工作是，如果失敗，則根據td值更改行顏色。 查看實際輸出：

解決了

Answer 1

為什么不直接在剃須刀代碼中設置類？

<tr class="@(item.Status == "Failed" ? "failed" : "")">

Answer 2

將一個類添加到您的狀態列

<td class="status">@item.Status</td>

然后在腳本中：

<script>
    $(function() {

        $(".table-striped").find("tr").each(function () {
           var status= $(this).find(".status").html();  
           if(status=="Failed")
             {
                    $(this).addClass("failed")
             }
        });
    });
</script>

它會工作。 試試吧 ！

Answer 3

無需編寫任何js代碼。 您可以直接在tr標簽上添加狀態類

<tr class='@item.Status'>

.Failed {
    background: red;
    color: white;
}