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

Question

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

我将 div 设置为表格样式，我需要能够比较一行中的 2 个单元格，然后在 budget 单元格值较小时更改行的背景颜色比 actual 单元格值。我对 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;
}