问题描述
我的表中有四个排名，我想为每个排名使用不同的颜色，并且 可能将每个字母加粗。我想我可以添加
- 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,"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>
解决方法
这是 css 的工作。使用类并使其简单，使类与您当前的标识符（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,"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','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>试试这个
**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>