css 我需要表的背景颜色是根据目前的价值变化,有人可以协助这[复制]

dced5bon 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(121)

- 此问题在此处已有答案**：

What do querySelectorAll and getElementsBy* methods return?（12个答案）
15小时前关门了。
此帖子已在14小时前编辑并提交审阅，未能重新打开帖子：
原始关闭原因未解决

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
 border: 1px solid black
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Snaplex_name</th>
    <th>Node_name</th> 
    <th>CPU_Utilization</th>
    <th>Memory_Utilization</th>
    <th>Version</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Server1</td>
    <td>Serverd01</td>
    <td>78</td>
    <td>25</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  <tr>
    <td>Server1</td>
    <td>serverd01</td>
    <td>60</td>
    <td>75</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>

<script>
    if(document.getElementsByTagName("td").innerHtml<=50){
        document.getElementsByTagName("td").style.backgroundColor="green";
    }
    else if(document.getElementsByTagName("td").innerHtml<=75 && document.getElementsByTagName("td").innerHtml>50){
document.getElementsByTagName("td").style.backgroundColor="Yellow";}
    else{
           document.getElementsByTagName("td").style.backgroundColor="Red";
         }

</script>
</html>

我尝试在HTML上面的代码，但它不为我工作。所以我需要帮助，以获得颜色代码的CPU_利用率和内存利用率的基础上指定的值在HTML代码。我需要表的背景颜色是改变的基础上，目前的价值。从0 - 50绿色，50 - 75黄色，75 - 100红色可以有人协助这一点。

css

来源：https://stackoverflow.com/questions/74903457/i-need-table-background-colour-to-be-change-based-on-the-value-present-can-some

2条答案

按热度按时间

pkln4tw61#

/*

    if(document.getElementsByTagName("td").innerHtml<=50){
   
        document.getElementsByTagName("td").style.backgroundColor="green";
    }
    else if(document.getElementsByTagName("td").innerHtml<=75 && document.getElementsByTagName("td").innerHtml>50){
document.getElementsByTagName("td").style.backgroundColor="Yellow";}
    else{
           document.getElementsByTagName("td").style.backgroundColor="Red";
         }
         
        */

let tds = document.getElementsByTagName("td")
for (i = 0; i < tds.length; i++){  
   let num = tds[i].innerHTML
   if(i == 4 || i == 10);
   else if(tds[i].innerHTML <= 50 )tds[i].style.backgroundColor = "green";
   else if(tds[i].innerHTML <= 75)tds[i].style.backgroundColor = "yellow";
   else if(Number.isInteger(Number(num)))tds[i].style.backgroundColor = "red";

}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
 border: 1px solid black
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Snaplex_name</th>
    <th>Node_name</th> 
    <th>CPU_Utilization</th>
    <th>Memory_Utilization</th>
    <th>Version</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Server1</td>
    <td>Serverd01</td>
    <td>78</td>
    <td>25</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  <tr>
    <td>Server1</td>
    <td>serverd01</td>
    <td>60</td>
    <td>75</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  </table>

</body>
</html>

赞(0）回复(0）举报 2022-12-24

falq053o2#

一般来说，这应该在服务器端完成，根据值的不同，在服务器端设置相应的类。
但是如果你想在客户端执行，你必须遍历表中的行。在每一行中，你必须检查两个数字。你总是得到一个字符串innerHTML/innerText。因此，你应该在比较之前将字符串转换成一个数字，例如parseint。根据比较结果，你可以设置背景。

const table = document.getElementById("table");

for(let i = 1; i < table.rows.length; i++) {
  setBackground(table.rows[i].cells[2]);
  setBackground(table.rows[i].cells[3]);
}

function setBackground(element) {
  const value = parseInt(element.innerText);
  if(value <= 50) {
    element.style.background = "green";
  } else if(value <= 75) {
    element.style.background = "yellow";
  } else {
    element.style.background = "red";
  }
}

<table style="width:100%" id="table">
  <tr>
    <th>Snaplex_name</th>
    <th>Node_name</th> 
    <th>CPU_Utilization</th>
    <th>Memory_Utilization</th>
    <th>Version</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Server1</td>
    <td>Serverd01</td>
    <td>78</td>
    <td>25</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  <tr>
    <td>Server1</td>
    <td>serverd01</td>
    <td>60</td>
    <td>75</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
</table>

赞(0）回复(0）举报 2022-12-24

我来回答

css 我需要表的背景颜色是根据目前的价值变化,有人可以协助这[复制]

2条答案

相关问题

热门标签

最新问答