HTML Table 按值范围的条件单元格颜色

Question

我从 Pandas DataFrame 渲染了一个 HTML 文件，我试图根据单元格值设置单元格颜色的样式。我可以使用下面的 html 脚本使用一些 JS 和 CSS:

来做到这一点

<!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 的值。它还希望将此条件格式应用于平均列 - 在这种情况下为浮点值。

我觉得使用彩色地图可能不是最好的解决方案。有什么建议可以解决这个问题吗？

Answer 1

我想你可以像这样在 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>

Answer 2

更紧凑的代码，更易于定制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>

HTML Table 按值范围的条件单元格颜色

HTML Table Conditional Cell Color by Value Ranges

html

javascript

css

conditional-formatting

range