Asp.net
ASP.NET Razor HTML - 根據值更改表格行的背景顏色
我正在使用剃須刀視圖引擎使用 ASP.NET c# 開發一個網站。我正在使用 for 循環來顯示數據庫中的行並將其顯示在 html 表中。每行包含一個名為“requestStatus”的變數。請求狀態為“已批准”、“已拒絕”或待處理。有沒有辦法可以根據 requeststatus 更改表格行的 bg 顏色,例如,如果 requeststatus 為“待處理”,則將表格行設置為黃色,如果請求狀態為“已批准”,則將表格行 bgcolor 設置為綠色?
任何幫助都會很棒!
我使用的程式碼顯示表格如下
<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>
只需使用 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>