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

Question

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

我将 div 设置为显示为表格的样式，如果budget 单元格值小于actual，我需要能够比较一行中的 2 个单元格，然后更改行的背景颜色单元格值。我对 MVC 和网页设计很陌生。

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

<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>

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

.table {
    display:table;
}
.header {
    display:table-header-group;
    font-weight:bold;
}
.row {
    display:table-row;
}
.rowGroup {
    display:table-row-group;
}
.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;
}

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;
}