MVC表使用javascript突出顯示行

我有一個ASP.Net MVC表，我需要在其加載時突出顯示某些行。如果類型=扣費或追溯，那麼我需要突出顯示該行。我不知道如何去做這件事。我想你會用Javascript做突出顯示，但是如何檢查表格中的類型然後突出顯示它？MVC表使用javascript突出顯示行

這裏是我的表：

<table> 
          <thead> 
           <tr> 
            <th>Order No.</th> 
            <th>Type</th> 
            <th>Price</th> 
            <th>Reason</th> 
            <th>Fill Date</th> 
            <th>Due Date</th> 
           </tr> 
          </thead> 
          <tbody> 
           @foreach (var linkedOrder in order.LinkedOrders) 
           { 
            <tr> 
             <td> 
              @if (@linkedOrder.Type == "Spiff") 
              { 
               <a onclick="DisplayReceipt('@linkedOrder.OrderNo')">@linkedOrder.OrderNo</a> 
              } 
              else 
              { 
               @linkedOrder.OrderNo 
              } 

             </td> 
             <td>@linkedOrder.Type</td> 
             <td>@linkedOrder.Price.ToString("C")</td> 
             <td>@linkedOrder.Reason</td> 
             <td>@(linkedOrder.FillDate == null ? "--" : linkedOrder.FillDate.Value.ToShortDateString())</td> 
             <td>@(linkedOrder.DueDate == null ? "--" : linkedOrder.DueDate.Value.ToShortDateString())</td> 
            </tr> 
           } 
          </tbody> 
         </table>

來源

2015-12-02 hollyquinn

你並不真正需要的JavaScript，你可以通過剃刀做到像下面

<tr @if (linkedOrder.Type == "chargeback") { <text> style="background-color:silver;" </text> }>

在體內與此標記

更換你 <tr>

來源

2015-12-02 15:43:37

謝謝！它很棒！ – hollyquinn

您最好通過設置'class'的值而不是使用內聯樣式來做到這一點。 @ hutchonoid的答案顯示瞭如何以更簡潔和可維護的方式做到這一點。 –

剃刀/ css解決方案可能是：

... 
<tr class="@linkedOrder.Type"> 
     <td> ...

添加CSS：

tr.chargeback { 
    background-color: red; 
} 

tr.retroactive { 
    background-color: green; 
}

jsFiddle

來源

2015-12-02 15:51:28 hutchonoid

MVC表使用javascript突出顯示行

回答

相關問題