HTML表格條件單元格顏色值范圍-有解無憂

我已經從 Pandas DataFrame 渲染了一個 HTML 檔案，我試圖根據單元格值設定單元格顏色的樣式。我可以使用一些 JS 和 CSS 使用下面的 html 腳本來做到這一點：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DATA FRAME TABLE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
 
  <!-- ## WORING HTML -->
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
  <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
  <link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-scrollbar.css">
  <link rel="stylesheet" type="text/css" href="css/util.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>
<table id="status_report" border="1" class="table table-hover" data-vertable="ver1">
  <tbody  style="text-align: center;">
    <tr>
      <td>Name</td>
      <td>Round 1</td>
      <td>Round 2</td> 
      <td>Round 3</td>
      <td>Round 4</td>
      <td>Avg</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>19</td>
      <td>24</td>
      <td>22</td>
      <td>27</td>
      <td>23.0</td>
    </tr>
    <tr>
      <td>Harry</td>
      <td>21</td>
      <td>19</td>
      <td>15</td>
      <td>19</td>
      <td>18.5</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>10</td>
      <td>22</td>
      <td>18</td>
      <td>21</td>
      <td>17.8</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>18</td>
      <td>19</td>
      <td>16</td>
      <td>17</td>
      <td>17.5</td>
    </tr>
    <tr>
      <td>Angus</td>
      <td>13</td>
      <td>-</td>
      <td>21</td> 
      <td>19</td>
      <td>17.2</td>
    </tr>
  </tbody>
</table>

<script>

  var colorMap = {
      "-": "RGBA(85,83,108,0.4)",
      0 : "RGBA(255,198,191,0.4)",
      1 : "RGBA(255,198,191,0.4)",
      2 : "RGBA(255,198,191,0.4)",
      3 : "RGBA(255,198,191,0.4)",
      4 : "RGBA(255,198,191,0.4)",
      5 : "RGBA(255,198,191,0.4)",
      6 : "RGBA(255,198,191,0.4)",
      7 : "RGBA(255,198,191,0.4)",
      8 : "RGBA(255,198,191,0.4)",
      9 : "RGBA(255,198,191,0.4)",
      10 : "RGBA(255,198,191,0.4)",
      11 : "RGBA(255,198,191,0.4)",
      12 : "RGBA(255,198,191,0.4)",
      13 : "RGBA(255,198,191,0.4)",
      14 : "RGBA(255,198,191,0.4)",
      15 : "RGBA(170,214,136,0.4)",
      16 : "RGBA(170,214,136,0.4)",
      17 : "RGBA(170,214,136,0.4)",
      18 : "RGBA(170,214,136,0.4)",
      19 : "RGBA(170,214,136,0.4)",
      20 : "RGBA(152,195,119,0.6)",
      21 : "RGBA(152,195,119,0.6)",
      22 : "RGBA(152,195,119,0.6)",
      23 : "RGBA(152,195,119,0.6)",
      24 : "RGBA(152,195,119,0.6)",
      25 : "RGBA(139,189,120,0.9)",
      26 : "RGBA(139,189,120,0.9)",
      27 : "RGBA(139,189,120,0.9)",
      28 : "RGBA(139,189,120,0.9)",
      29 : "RGBA(139,189,120,0.9)",
      30 : "RGBA(94,167,88,0.9)",
  };

  $('#status_report td').css('background-color', function(){
      return colorMap[$(this).text()] || '';
  });
</script>

</body>
</html>

但是我意識到 ColorMap 腳本效率非常低，而不是我想要做的。我真正想做的是讓 ColorMap 基于范圍 - 而不是一個一個地寫出單個整數。我嘗試過使用范圍做類似的事情，但我對 JS 和 CSS 缺乏經驗。

    <script>

      var colorMap = {
          "-": "RGBA(85,83,108,0.4)",
          0-15 : "RGBA(255,198,191,0.4)", # Light Red
          15-20 : "RGBA(170,214,136,0.4)", # Lightest green
          20-25 : "RGBA(152,195,119,0.6)", # Light Green
          25-30 : "RGBA(139,189,120,0.9)", # Dark Green
          30  : "RGBA(94,167,88,0.9)", # Darkest Green
      };

      $('#status_report td').css('background-color', function(){
          return colorMap[$(this).text()] || '';
      });
    </script>

我知道這種方法不適用于顏色圖，但我想使用范圍來滿足添加的新值 - 例如高于 30 的值。它還希望它將這種條件格式應用于平均列 - 所以浮動在這種情況下的值。

我覺得使用彩色地圖可能不是最好的解決方案。有什么建議可以解決這個問題嗎？

uj5u.com熱心網友回復：

我認為您可以像這樣在 js 中設定條件。

$(document).ready(function(){
    $('#status_report tr td').each(function(){
        if ($(this).text() == '-') {
            $(this).css('background-color','RGBA(85,83,108,0.4)');
        }else if ($(this).text() >=0 && $(this).text() <=15) {
            $(this).css('background-color','RGBA(255,198,191,0.4)');
        }else if ($(this).text() > 15 && $(this).text() <=20) {
            $(this).css('background-color','RGBA(170,214,136,0.4)');
        }else if ($(this).text() > 20 && $(this).text() <=25) {
            $(this).css('background-color','RGBA(152,195,119,0.6)');
        }else if ($(this).text() > 25 && $(this).text() <=30) {
            $(this).css('background-color','RGBA(139,189,120,0.9)');
        }else if ($(this).text() > 30) {
            $(this).css('background-color','RGBA(94,167,88,0.9)');
        }
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DATA FRAME TABLE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<table id="status_report" border="1" class="table table-hover" data-vertable="ver1">
  <tbody  style="text-align: center;">
    <tr>
      <td>Name</td>
      <td>Round 1</td>
      <td>Round 2</td> 
      <td>Round 3</td>
      <td>Round 4</td>
      <td>Avg</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>19</td>
      <td>24</td>
      <td>22</td>
      <td>27</td>
      <td>23.0</td>
    </tr>
    <tr>
      <td>Harry</td>
      <td>21</td>
      <td>19</td>
      <td>15</td>
      <td>19</td>
      <td>18.5</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>10</td>
      <td>22</td>
      <td>18</td>
      <td>21</td>
      <td>17.8</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>18</td>
      <td>19</td>
      <td>16</td>
      <td>17</td>
      <td>17.5</td>
    </tr>
    <tr>
      <td>Angus</td>
      <td>13</td>
      <td>-</td>
      <td>21</td> 
      <td>19</td>
      <td>17.2</td>
    </tr>
  </tbody>
</table>

</body>
</html>

uj5u.com熱心網友回復：

更緊湊的代碼，更容易定制colorMap。

const colourMap = {
    "-": "RGBA(85,83,108,0.4)",
    "0-15": "RGBA(255,198,191,0.4)", 
    "16-20": "RGBA(170,214,136,0.4)", 
    "21-25": "RGBA(152,195,119,0.6)", 
    "26-30": "RGBA(139,189,120,0.9)", 
    "31 ": "RGBA(94,167,88,0.9)",
};
for (const cell of document.getElementsByTagName("td")){
    if (cell.innerHTML == "-"){
        cell.style.backgroundColor = colourMap["-"]; 
    }else{
        for (const range of Object.keys(colourMap)) if (range != "-" && (/^[0-9] \ $/g.test(range) && Number(cell.innerHTML) >= Number(range.slice(0, -1))) || (Number(range.split("-")[0]) <= Number(cell.innerHTML) && Number(range.split("-")[1]) >= Number(cell.innerHTML))) cell.style.backgroundColor = colourMap[range]; 
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DATA FRAME TABLE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<table id="status_report" border="1" class="table table-hover" data-vertable="ver1">
  <tbody  style="text-align: center;">
    <tr>
      <td>Name</td>
      <td>Round 1</td>
      <td>Round 2</td> 
      <td>Round 3</td>
      <td>Round 4</td>
      <td>Avg</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>19</td>
      <td>24</td>
      <td>22</td>
      <td>27</td>
      <td>23.0</td>
    </tr>
    <tr>
      <td>Harry</td>
      <td>21</td>
      <td>19</td>
      <td>15</td>
      <td>19</td>
      <td>18.5</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>10</td>
      <td>22</td>
      <td>18</td>
      <td>21</td>
      <td>17.8</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>18</td>
      <td>19</td>
      <td>16</td>
      <td>17</td>
      <td>17.5</td>
    </tr>
    <tr>
      <td>Angus</td>
      <td>13</td>
      <td>-</td>
      <td>21</td> 
      <td>19</td>
      <td>17.2</td>
    </tr>
  </tbody>
</table>

</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480331.html

標籤：javascript html css 范围条件格式

上一篇：如何在htmljavascript中添加另一個功能但不同的按鈕

下一篇：更新物體springjpa時的分離物體問題