MVC 表使用 javascript 突出显示行答案

【问题标题】：MVC table highlight rows using javascriptMVC 表使用 javascript 突出显示行
【发布时间】：2015-12-02 15:32:40
【问题描述】：

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

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc razor

【解决方案1】：

你真的不需要 javascript，你可以像下面这样通过 razor 来做

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

用这个标记替换正文中的<tr>

【讨论】：

您最好通过设置class 值而不是使用内联样式来执行此操作。 @hutchonoid 的回答展示了如何以更简洁和可维护的方式做到这一点。

【解决方案2】：

剃须刀/css 解决方案可能是：

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

添加css：

tr.chargeback {
   background-color: red;
}

tr.retroactive {
   background-color: green;
}

jsFiddle

【讨论】：