ASP.NET Razor HTML - 根据值更改表格行的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23389822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET Razor HTML - Change the background color of a tables row depending on a value
提问by derek
I am developing a website using ASP.NET c# using razor view engine. I am using a for loop to display rows from a database and display it in a html table. each row contains a variable called "requestStatus". the request status is either "approved", "rejected" or Pending. Is there a way i can change the bg color of the table row based on the requeststatus , so for example if the requeststatus is "pending" set the table row to yellow, if the request status is "approved" set table row bgcolor to green ?
我正在使用 ASP.NET c# 使用 razor 视图引擎开发网站。我正在使用 for 循环来显示数据库中的行并将其显示在 html 表中。每行包含一个名为“requestStatus”的变量。请求状态为“已批准”、“已拒绝”或“待处理”。有没有办法可以根据 requeststatus 更改表行的 bg 颜色，例如，如果 requeststatus 为“待处理”，则将表行设置为黄色，如果请求状态为“已批准”，则将表行 bgcolor 设置为绿色?
any help would be much great !
任何帮助都会很棒！
the code i use display the table is below
我使用的代码显示表格如下
<fieldset>
<legend>Your Leave Requests</legend>
<table border="1" width="100%">
<tr bgcolor="grey">
<th>Description</th>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total days leave requested</th>
<th>Request Status</th>
</tr>
@foreach(var rows2 in rows1){
<tr>
<th>@rows2.description</th>
<th>@rows2.leaveType</th>
<th>@rows2.startDate.ToString("dd-MMMM-yyyy")</th>
<th>@rows2.endDate.ToString("dd-MMMM-yyyy")</th>
<th>@rows2.totalDays</th>
<th>@rows2.requestStatus</th>
</tr>
}
</table>
</fieldset>
回答by SkyBlues87
Just use the requestStatus as you class name and assign styles as appropiate:
只需使用 requestStatus 作为您的类名并根据需要分配样式：
<style type="text/css">
.grey {
background-color:grey;
}
.approved {
background-color:green;
}
.rejected {
background-color:red;
}
.pending {
background-color:lime;
}
</style>
<fieldset>
<legend>Your Leave Requests</legend>
<table border="1" width="100%">
<tr class="grey">
<th>Description</th>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total days leave requested</th>
<th>Request Status</th>
</tr>
@foreach (var rows2 in rows1)
{
<tr class="@rows2.requestStatus">
<td>@rows2.description</th>
<td>@rows2.leaveType</th>
<td>@rows2.startDate.ToString("dd-MMMM-yyyy")</th>
<td>@rows2.endDate.ToString("dd-MMMM-yyyy")</th>
<td>@rows2.totalDays</th>
<td>@rows2.requestStatus</th>
</tr>
}
</table>
</fieldset>
回答by JasonWilczak
Your razor should look something like this:
Your Leave Requests
你的剃须刀应该是这样的：
你的休假请求
<tr bgcolor="grey">
<th>Description</th>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total days leave requested</th>
<th>Request Status</th>
</tr>
@foreach (var rows2 in rows1)
{
@
{
var statusClass = "colorA";
if (rows2.requestStatus == "pending")
{
statusClass = "colorB";
}
}
<tr class="@statusClass">
<td>@rows2.description</td>
<td>@rows2.leaveType</td>
<td>@rows2.startDate.ToString("dd-MMMM-yyyy")</td>
<td>@rows2.endDate.ToString("dd-MMMM-yyyy")</td>
<td>@rows2.totalDays</td>
<td>@rows2.requestStatus</td>
</tr>
}
</table>
</fieldset>
Then you need to have some classes specified in your css:
然后你需要在你的css中指定一些类：
.colorA {background-color: red}
.colorB {background-color: green}
That answers your question based on your code. A better practice, imo, would be to put a statusClass property on your row2 object model. Then, in your logic, set this based on whatever logic you need and, instead of having that "if" statement and variable, just set the tr class directly, like this:
这会根据您的代码回答您的问题。imo 更好的做法是在 row2 对象模型上放置一个 statusClass 属性。然后，在您的逻辑中，根据您需要的任何逻辑设置它，而不是使用“if”语句和变量，只需直接设置 tr 类，如下所示：
<tr class="@row2.statusClass">
回答by Alireza
If you want to change row color without define CSS class you can do this:
如果您想在不定义 CSS 类的情况下更改行颜色，您可以这样做：
<fieldset>
<table border="1" width="100%">
<tr bgcolor="grey">
<th>Description</th>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total days leave requested</th>
<th>Request Status</th>
</tr>
@foreach (var rows2 in rows1)
{
if(rows2.requestStatus == "pending"){
<tr style="background:#faf0bc">
<td>@rows2.description</td>
<td>@rows2.leaveType</td>
<td>@rows2.startDate.ToString("dd-MMMM-yyyy")</td>
<td>@rows2.endDate.ToString("dd-MMMM-yyyy")</td>
<td>@rows2.totalDays</td>
<td>@rows2.requestStatus</td>
</tr>
}
else{
<tr style="background:#fef7d0">
<td>@rows2.description</td>
<td>@rows2.leaveType</td>
<td>@rows2.startDate.ToString("dd-MMMM-yyyy")</td>
<td>@rows2.endDate.ToString("dd-MMMM-yyyy")</td>
<td>@rows2.totalDays</td>
<td>@rows2.requestStatus</td>
</tr>
}
}
</table>
</fieldset>
