需要比較單元格值，然後根據結果更改背景

編輯：我發現的唯一答案使用表格，而不是divs，因此它們並不真正幫助我。我沒有使用實際的表格，我正在模擬一個帶有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; 
}

來源

2015-03-13 user3693406

CSS無法檢測的內容...唯一的風采吧。你打算如何做這個比較？ – 2015-03-13 16:35:44

[根據值更改表格的背景單元格]的可能重複（http://stackoverflow.com/questions/8666500/changing-background-cell-of-table-depending-on-value） – 2015-03-13 16:36:27

我想通通過爲每個單元格的類名稱使用一個變量，並根據這些值更改變量。

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

來源

2015-03-13 18:22:36 user3693406

需要比較單元格值，然後根據結果更改背景

回答

相關問題