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

Question

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

我将 div 样式设置为 table，并且我需要能够比较一行中的 2 个单元格，然后在 budget 单元格时更改该行的背景颜色值小于 actual 单元格值。我对 MVC 和一般网页设计还很陌生。

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

<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 样式的地方：

.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

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

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

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

Need to compare cell values then change background depending on result

html

css

c#

model-view-controller

css-tables