Question

我的模型填充了一个表格如下：

    <tr>
    <td style="width: 45%;"><%= item.UnmatchedAddress %></td>
    <td style="width: 45%;"><%= item.MatchedAddress %></td>
    <td style="width: 10%; text-align: center;"><%= item.ReviewedStatus %></td>
</tr>

对于第3列，即，我可以拥有2-3个不同的值，而且根据不同的值，我想更改该TD的背景颜色。

所以我知道我可以通过改变item.ReviewedStatus来做到这一点，它可以是0,1,2,3,4我希望有一个不同的css类。

实现这一目标的好方法是什么？

Answer 1

使用Razor语法可以实现此目的。请尝试以下代码：

 <tr>
    <td style="width: 45%;"><%= item.UnmatchedAddress %></td>
    <td style="width: 45%;"><%= item.MatchedAddress %></td>

    @{
        var color = "#fff";
        if (item.ReviewedStatus == "Pending")
        {
            color = "red";
        }
        else if (item.ReviewedStatus == "Done")
        {
            color = "green";
        }
    }
    <td style="width: 10%; text-align: center;background-color: @color"><%= item.ReviewedStatus %></td>
</tr>

Answer 2

请试试这个

@switch (item.ReviewedStatus)
{
    case 0: 
            <td class="class1" style="width: 10%; text-align: center;"><%= item.ReviewedStatus %</td>
             break;
    case 1: 
             <td class="class2" style="width: 10%; text-align: center;"><%= item.ReviewedStatus %</td>
             break;
}

Answer 3

一种方法是在视图中直接派生css类，如下所示：

<%
    string cssClass;
    switch (item.ReviewedStatus)
    {
        case 0:
            cssClass = "class1";
            break;
        case 1:
            cssClass = "class2";
            break;
        ...
    }
%>
<td style="width: 10%; text-align: center;" class="<%= cssClass %>"><%= item.ReviewedStatus %></td>

是的，最好使用css类而不是内联样式。

Answer 4

您可以拥有item.ReviewedStatusColor并按照

进行操作

<td style="width: 10%; text-align: center; background-color:@(item.ReviewedStatusColor);">@item.ReviewedStatus</td>

P.S。：用剃刀语法;我不确定如何在网页语法中做到这一点。

mvc根据模型值更改表列颜色

4 个答案: