如何为 table 中的每个排名设置不同的颜色

Question

我的 table 中有四个排名，我想为每个排名使用不同的颜色，并且每个字母可能加粗。我想我可以添加但这只会改变所有具有相同颜色的排名的颜色。我怎样才能为每个单独的排名添加不同的颜色而不是描述。试了几天没有解决。

 - Y = yellow  R = Red  G = Green   B = Blue

JavaScript:

    const RANK_TO_DESCRIPTION_MAPPING = {
        "R": "There is a release site/generator at or within 500 feet of the target property",
        "Y": "There is a release site/generator within 500 feet and 1,000 feet of the target property",
        "G": "There are no known release sites/generators within 1,000 feet of the target property",
        "B": "There is a drinking water well at or within 500 feet of the target property",
    }

HTML:

<div class="mb-2">
<div class="results-section">
     <div class="report-wrapper">
        <div class="col-auto">
                <table class="table table-sm table-striped table-light">
                <tbody>
                <tr>
                    <th class="report-header" colspan="5" style="text-align: center;">Report</th>
                </tr>
                <tr>
                    <th> Address: </th> 
                    <td id="proposed-address">  </td>   
                </tr>
                <tr>
                    <th> Latitude: </th>    
                    <td id="proposed-lat"> </td>    
                </tr>
                <tr>
                    <th> Longitude: </th>   
                    <td id="proposed-lng"> </td>    
                </tr>
                <tr>
                    <th> Rank: </th>
                    <td id="proposed-rank"> </td>
                </tr>

                <tr>
                    <th> Description: </th>
                    <td id="proposed-description"> </td>
                </tr>
            
                <tr>
                     <th> NHDES OneStop Website: </th>
                     <td id="proposed-website"> </td>
                </tr>

                </tbody>
                </table>
        </div>  
     </div>
</div>          
</div>

Answer 1

这是 css 的工作。使用 classes 并为方便起见，使 class 与您当前的标识符 (Y、R、G、B) 相同。为清楚起见，我删除了另一个 HTML。为了好玩，我添加了一个旋转脚本来每秒更改颜色，但是那部分（setInterval 部分绝对没有必要。

//  - Y = yellow  R = Red  G = Green   B = Blue

const RANK_TO_DESCRIPTION_MAPPING = {
  "R": "There is a release site/generator at or within 500 feet of the target property",
  "Y": "There is a release site/generator within 500 feet and 1,000 feet of the target property",
  "G": "There are no known release sites/generators within 1,000 feet of the target property",
  "B": "There is a drinking water well at or within 500 feet of the target property",
}

function applyRank(rank) {
  let elem = document.querySelector('#proposed-rank');
  //  elem.innerText = RANK_TO_DESCRIPTION_MAPPING[rank]; // remove this if you don't want the text changed.
  elem.classList.remove('R', 'B', 'Y', 'G');
  elem.classList.add(rank);
}

// this is how to use the function
// applyRank('R');
// or applyRank('B');
// or applyRank('Y');
// or applyRank('G');

// this part not neccesary
//setInterval(() => applyRank(['Y', 'B', 'R', 'G'][Math.floor(Math.random() * 4)]), 1000);

.R {
  color: red;
}

.G {
  color: green;
}

.B {
  color: blue;
}

.Y {
  color: yellow;
}

<table class="table table-sm table-striped table-light">
  <tbody>
    <tr>
      <th> Rank: </th>
      <td id="proposed-rank"> Click the buttons to change the rank </td>
    </tr>
  </tbody>
</table>

<button onclick="applyRank('R')">Rank R</button>
<button onclick="applyRank('Y')">Rank Y</button>
<button onclick="applyRank('G')">Rank G</button>
<button onclick="applyRank('B')">Rank B</button>

Answer 2

试试这个

 **CSS**

#proposed-address{
    background-color: red;
}
#proposed-lat{
    background-color: aqua;
}

#proposed-lng{
    background-color: gold;
}
#proposed-rank{
    background-color: brown;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tutorial</title>
        <link rel = "stylesheet" href="css/style.css">

       
    </head>
    <body>
        <div class="mb-2">
            <div class="results-section">
                 <div class="report-wrapper">
                    <div class="col-auto">
                            <table class="table table-sm table-striped table-light">
                            <tbody>
                            <tr>
                                <th class="report-header" colspan="5" style="text-align: center;">Report</th>
                            </tr>
                            <tr>
                                <th> Address: </th> 
                                <td id="proposed-address">XYZ Address</td>   
                            </tr>
                            <tr>
                                <th> Latitude: </th>    
                                <td id="proposed-lat">Xyz Latitude</td>    
                            </tr>
                            <tr>
                                <th> Longitude: </th>   
                                <td id="proposed-lng">XYZ Longitude</td>    
                            </tr>
                            <tr>
                                <th> Rank: </th>
                                <td id="proposed-rank"> XYZ Rank</td>
                            </tr>
            
                            <tr>
                                <th> Description: </th>
                                <td id="proposed-description"> </td>
                            </tr>
                        
                            <tr>
                                 <th> NHDES OneStop Website: </th>
                                 <td id="proposed-website"> </td>
                            </tr>
            
                            </tbody>
                            </table>
                    </div>  
                 </div>
            </div>          
            </div>
        
        <script src="script.js"></script>
    </body>
</html>

如何为 table 中的每个排名设置不同的颜色

How to have a different color for each ranking in your table

javascript

html

ranking