Asp.net

ASP.NET Razor HTML - 根據值更改表格行的背景顏色

  • December 30, 2020

我正在使用剃須刀視圖引擎使用 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>

引用自:https://stackoverflow.com/questions/23389822