javascript - MVC表如何改变文字颜色的条件

我想更改特定表列的文本颜色，如果模型值超过-等于-等于0。详细，如果值超过零，它将变为绿色，等于0时为红色，等于蓝色时为蓝色。

我的桌子在上面：

<div class="row">
    <table id="RealtimeSharesTable" class="dataTable table table-hover table-striped table-bordered">
         <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => dummy.RealtimeOrder)</th>
                <th>@Html.DisplayNameFor(model => dummy.AlternativeName)</th>
                <th>@Html.DisplayNameFor(model => dummy.Last)</th>
                <th>@Html.DisplayNameFor(model => dummy.PctChange)</th>
                <th>@Html.DisplayNameFor(model => dummy.Bid)</th>
                <th>@Html.DisplayNameFor(model => dummy.BSize)</th>
                <th>@Html.DisplayNameFor(model => dummy.Ask)</th>
                <th>@Html.DisplayNameFor(model => dummy.ASize)</th>
                <th>@Html.DisplayNameFor(model => dummy.Capital)</th>
                <th>@Html.DisplayNameFor(model => dummy.High)</th>
                <th>@Html.DisplayNameFor(model => dummy.Low)</th>
                <th>@Html.DisplayNameFor(model => dummy.Volume)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (ShareViewModel item in Model.Shares)
            {
                <tr id="@item.Symbol.Replace(".", "_").Replace("=","_")">
                    <td>@Html.DisplayFor(model => item.RealtimeOrder)</td>
                    <td>@Html.DisplayFor(model => item.AlternativeName)</td>
                    <td>@Html.DisplayFor(model => item.Last)</td>
                    <td>@Html.DisplayFor(model => item.PctChange) %</td>
                    <td>@Html.DisplayFor(model => item.Bid)</td>
                    <td>@Html.DisplayFor(model => item.BSize)</td>
                    <td>@Html.DisplayFor(model => item.Ask)</td>
                    <td>@Html.DisplayFor(model => item.ASize)</td>
                    <td>@Html.DisplayFor(model => item.Capital)</td>
                    <td>@Html.DisplayFor(model => item.High)</td>
                    <td>@Html.DisplayFor(model => item.Low)</td>
                    <td>@Html.DisplayFor(model => item.Volume)</td>
                </tr>
            }
        </tbody>
    </table>
</div>

我需要这样做的列是“ item.PctChange”，具体取决于他的价格。我尝试了许多解决方案，但我想征求专家的建议。

谢谢。

最佳答案

这是我的方法..

直接在class的td属性中使用三元运算符

三元运算符将为if else if else

即：item.PctChange > 0? "green" : item.PctChange == 0? "blue" : "red"

将一个类添加到要着色的td元素。

因此，如下更改您的td。

<td class="@( item.PctChange > 0? "green" : item.PctChange == 0? "blue" : "red")">@Html.DisplayFor(model => item.PctChange) %</td>

对于类，还具有CSS规则，以相应地为td着色。

.green{
  background-color:green;
 }

.blue{
  background-color:blue;
 }

.green{
  background-color:red;
 }