I've been working on changing the color of table rows based on the text contained in one of its cells. Specifically, I want a row to turn red if the cell contains the value "Failed." However, only one row is behaving as expected.
Below is the code I'm using:
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 Code:
<script>
$(function() {
$(".table-striped").find("tr").each(function () {
$("td").filter(function() {
return $(this).text() === "Failed";
}).parent().addClass("failed");
});
});
</script>
The goal is to dynamically change the row color depending on the value of the cell (if it's "Failed"). You can view the actual output here: https://i.sstatic.net/M5Dqg.jpg
This issue has been resolved.