编辑:我找到的唯一答案是使用表格,而不是 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;
}
最佳答案
我通过为每个单元格的类名使用一个变量,并根据值更改变量来解决这个问题。
@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;
}
关于c# - 需要比较单元格值然后根据结果更改背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29037419/