Question

我有一个ASP.Net MVC表，我需要在加载时突出显示其中的某些行。如果type = chargeback或retroactive，那么我需要突出显示该行。我不知道该怎么做。我想你会用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>

Answer 1

你真的不需要javascript，你可以通过下面的剃刀来做到这一点

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

用此标记替换身体中的<tr>

Answer 2

razor / css解决方案可能是：

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

添加css：

tr.chargeback {
   background-color: red;
}

tr.retroactive {
   background-color: green;
}

jsFiddle

MVC表使用javascript突出显示行

2 个答案: