Question

编辑：我发现的唯一答案是使用表格，而不是div，所以他们并没有真正帮助我。我没有使用实际的表，我正在使用div模拟表。

我将div设计为表格，我需要能够连续比较2个单元格，然后在budget单元格值小于{时更改行的背景颜色{1}}单元格值。我对MVC和网页设计都很陌生。

这是我的代码，它使用从数据库中提取的数据创建表：

actual

这是我在我的css中设置表格的地方：

<div class="table">
    <div class="header">
        <div class="cell">Client Name</div>
        <div class="cell">Project Name</div>
        <div class="cell">Budget</div>
        <div class="cell">Budget Used</div>
    </div>
    @foreach (var client in Model)
    {
    <div class="row">
        <div class="cell">@client.Client_name</div>
        <div class="cell">@client.Project_name</div>
        <div class="cell">@client.Project_budget</div>
        <div class="cell">@client.Project_actual</div>
    </div>
    }
</div>

Answer 1

我通过使用变量作为每个单元格的类名，并根据值更改变量来解决这个问题。

@foreach (var client in Model)
        {
            double calcPercent = ((@client.Project_actual / @client.Project_budget) * 100);
            string percent = String.Format("{0:0.00}", calcPercent);
            string cell = "cell";
            if (calcPercent > 100) { cell = "redCell"; }
            <div class="row">
                <div class="@cell">@client.Client_name</div>
                <div class="@cell">@client.Project_name</div>
                <div class="@cell">@client.Project_budget</div>
                <div class="@cell">@client.Project_actual</div>
                <div class="@cell">@percent</div>
            </div>
        }

CSS：

.cell {
    display:table-cell;
    width:27%;
    color:#696969;
    border-bottom:solid 1px #5ec5ca;
    border-left:solid 1px #5ec5ca;
    border-right:solid 1px #5ec5ca;
    border-top:solid 1px #5ec5ca;
    background-color:#CEF6F5;
}
.redCell {
    display:table-cell;
    width:27%;
    color:#696969;
    border-bottom:solid 1px #5ec5ca;
    border-left:solid 1px #5ec5ca;
    border-right:solid 1px #5ec5ca;
    border-top:solid 1px #5ec5ca;
    background-color:red;
}

需要比较单元格值，然后根据结果更改背景

1 个答案: