根据表格单元格值更改行的颜色
阿山
如果单元格在该行内包含某些文本，我正在尝试更改表格行的颜色。例如，如果单元格的值为 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] 删除。
编辑于
相关文章
Related 相关文章
- 1
根据单元格值DataTable更改行背景颜色
- 2
如何根据单元格值更改php中的单元格表颜色？
- 3
根据表格标题更改表格单元格的背景颜色
- 4
VBA-根据特定单元格的值更改单元格的颜色
- 5
如何根据单元格值更改行背景色
- 6
使用JavaScript根据JSON值更改表格单元格背景色
- 7
如何根据表格单元格中的值更改表格行的背景颜色？
- 8
根据单元格值更改字体和颜色大小
- 9
根据Google表格中单元格的背景颜色更改单元格值
- 10
根据值更改单元格颜色-VueJs和Vuetify
- 11
根据ASP和C＃中的值更改表格单元格颜色
- 12
jQuery datatable.net根据单元格的值更改行颜色
- 13
根据值更改表格中单元格字体的颜色-RoR
- 14
如何根据单元格值更改php中的单元格表颜色？
- 15
SSRS根据SUM值更改单元格颜色
- 16
如何在Excel中制作一个单元格以根据其他单元格的值更改颜色？
- 17
如何根据单元格值更改行背景色
- 18
数据表...如何根据表的单元格值更改单元格的颜色
- 19
根据单元格值更改行背景颜色
- 20
根据单元格值更改饼图上颜色的颜色
- 21
根据值更快地更改单元格颜色
- 22
根据颜色常量的单元格值更改内部颜色
- 23
根据表格视图单元格的类型更改行高
- 24
如何通过VBA根据其他单元格值更改单元格的背景颜色
- 25
根据单元格值更改图表颜色
- 26
根据下拉列表值更改 HTML 表格单元格的背景颜色？
- 27
根据来自另一个单元格（多行）的数值更改 x 个单元格的颜色
- 28
根据状态更改 JSON 的 HTML 表格的单元格颜色
- 29
Google 电子表格根据单元格值更改下拉选项
我来说两句