Question

我已经做了一张历史交易表。在我的事务数据库中，我有一列名为QuantityChange。值可以为负或正。

我想将行颜色设置为红色（如果它是负值），而将绿色设置为正（或零）。

什么是最好的解决方案？

<table class="table">
<thead>
    <tr>
        <th>
            Date
        </th>
        <th>
            Storage
        </th>
        <th>
            Product
        </th>
        <th>
            Quantity change
        </th>

    </tr>
</thead>
<tbody>

    @foreach (var item in Model)
    {

        <tr class="@item.QuantityChange">
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stock.Storage.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stock.Product.Name)
            </td>
            <td>
                @if (item.QuantityChange > 0)
              {

                    @Html.DisplayFor(modelItem => item.QuantityChange, new { 
style = "color:#00ff00" })

                }
                else
                {
                    @Html.DisplayFor(modelItem => item.QuantityChange, new { 
style = "color:#ff0000" })

                }
            </td>
        </tr>
    }
</tbody>
</table>

Answer 1

这可能是您的解决方案。

@foreach (var item in Model)
{
    <tr style="color:@(item.QuantityChange >= 0 ? "#00ff00" : "#ff0000")">
        <!-- insert other columns here -->
        <td> <!-- this has been modified -->
            @Html.DisplayFor(modelItem => item.QuantityChange)
        </td>
    </tr>
}

Answer 2

尝试

@{
    String color;
}

然后在表格中根据需要向每个元素添加样式。

@foreach (var item in Model)
{
    <tr>
    @{
        switch((item.QuantityChange)
        {
            case >0:
                color:"#00ff00";
                break;
            default:
                color:"color:#ff0000";
                break;
        }
    <td style="color:@color">
        @Html.DisplayFor(modelItem => item.QuantityChange)
    </td>

根据数据库中的单元格值（负/正）更改表行中的颜色

2 个答案: