2017-11-17 207 views
0

我需要將凍結溫度(32F,0C)的單元格的背景顏色更改爲#bff9ff,但有一些困難。我試圖在<td>內部打印CSS類,但似乎只是在循環內部不能正常工作並且正在同時打印。使用PHP While循環更改表格的單元格背景顏色

但是,這是一個問題。我如何識別凍結溫度和低於手動但不使用PHP的單元格?

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Unit 3 part 2</title> 

     <style> 
      table { 
       font-family: arial, sans-serif; 
       border-collapse: collapse; 
       width: 100%; 
      } 

      tr:hover { 
       background-color:#bff9ff; 
       } 

      td, th { 
       border: 1px solid #dddddd; 
       text-align: left; 
       padding: 8px;`` 
      } 
      .cell { 
       background-color: #00bfff; 
       }  

     </style> 

</head> 
<body> 

    <table border="1" cellpadding="3"> 

     <thead> 
      <th>Fahrenheit</th> 
      <th>Celsius</th> 
     </thead> 

     <?php 
     $fahrenheit = 50; 

     while ($fahrenheit >= -50) { 

      $celsius = ($fahrenheit - 32) * 5/9; 

      print "<tr><td>$fahrenheit</td><td>$celsius</td></tr>"; 

      $fahrenheit -= 5; 
      $celsius -= 5; 



     } ?> 

    </table> 

</body> 
</html> 

回答

0

通過添加一個if語句來測試溫度,然後向td標籤添加一個類,應該照顧它。

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Unit 3 part 2</title> 
    <style> 
     table { 
      font-family: arial, sans-serif; 
      border-collapse: collapse; 
      width: 100%; 
     } 
     tr:hover { 
      background-color:#bff9ff; 
      } 
     td, th { 
      border: 1px solid #dddddd; 
      text-align: left; 
      padding: 8px;`` 
     } 
     .cell { 
      background-color: #00bfff; 
      } 
     .cell.freezing { 
      background-color: #bff9ff; 
     } 
    </style> 
</head> 
<body> 
    <table border="1" cellpadding="3"> 
     <thead> 
      <th>Fahrenheit</th> 
      <th>Celsius</th> 
     </thead> 
     <?php 
     $fahrenheit = 50; 
     while ($fahrenheit >= -50) { 
      $celsius = ($fahrenheit - 32) * 5/9; 
      $class = ''; 
      if($fahrenheit <= 32) { 
       $class = ' freezing'; 
      } 
      print "<tr><td class='cell $class'>$fahrenheit</td><td class='cell $class'>$celsius</td></tr>"; 
      $fahrenheit -= 5; 
      $celsius -= 5; 
     } ?> 
    </table> 
</body> 
</html> 
+0

高興它爲你工作,請接受的答案。謝謝! –

0

創建一個名爲「freeze」的CSS類。如果添加冷凍類,例如使用,

"<td class='$freezing'></td>" 

基本上評估此:

if (32 <= $farenheit || 0 <= $celcius) { 
    $freezing = "freezing"; 
} 

編輯:CSS

.freezing { 
    background-color: #bff9ff; 
} 
相關問題