如果单元格在该行内包含某些文本,我正在尝试更改表格行的颜色。例如,如果单元格的值为 Failed,则行将变为红色。但只有一行按其应有的方式行事。
这是我的代码。
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 值更改行颜色。查看实际输出:
解决了
无需编写任何js代码。您可以直接在tr
标签上添加状态类
<tr class='@item.Status'>
.Failed {
background: red;
color: white;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句