Question

我正在运行脚本，在数据中心内轮询4个机箱以获取运行状况（电源，冷却等）。数据存储在一个数组中，然后通过管道传输到html以获得干净的外观。最终我想要进入仪表板。现在我想要一个'红色停止灯'按钮出现如果轮询在单元格中没有Ok（参见代码）而不是字符串OK。这甚至可能吗？谢谢！

以下是此项目的代码：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<script>
function ShowHide(body_id){ 
var TBody 

TBody = document.getElementById(body_id); 

if(!TBody) return true; 

if (TBody.style.display=="none") { 
  TBody.style.display="table" 
  } 
else { 
  TBody.style.display="none" 
  } 

return true; 
} 
</script>
<html><head><title>VCE Daily Battle Rhythm Report</title>
        <META http-equiv=Content-Type content='text/html; charset=windows-1252'>

        <style type="text/css">

        TABLE       {
                        TABLE-LAYOUT: fixed;
                        FONT-SIZE: 100%; 
                        WIDTH: 100%;                
                    }
        *
                    {
                        margin:0
                    }

        .pageholder {
                        margin: 0px auto;
                    }

        td              {
                        VERTICAL-ALIGN: TOP; 
                        FONT-FAMILY: Tahoma;
                    }

        th          {
                        VERTICAL-ALIGN: TOP; 
                        COLOR: #018AC0; 
                        TEXT-ALIGN: left;
                    }

        </style>
    </head>
    <body margin-left: 4pt; margin-right: 4pt; margin-top: 6pt;>
<div style="font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bolder; background-color:#FFFFFF;"><center>
<p class="accent">
<div class="MainTitle">Daily Enclosure Report</div>
<div class="SubTitle">Report created on 02/19/2016 07:07:23</div>
<div class="SubTitle">Server Enclosures Checked</div>
<br/>
</p>
</center></div>


        <div style="
    BORDER-RIGHT: medium none; 
    BORDER-TOP: medium none; 
    DISPLAY: block; 
    BACKGROUND: none transparent scroll repeat 0% 0%; 
    MARGIN-BOTTOM: -1px; 
    FONT: 100%/8px Tahoma; 
    MARGIN-LEFT: 43px; 
    BORDER-LEFT: medium none; 
    COLOR: #ffffff; 
    MARGIN-RIGHT: 0px; 
    PADDING-TOP: 4px; 
    BORDER-BOTTOM: medium none; 
    POSITION: relative
"></div>        <h2 onclick="ShowHide('9')" style="
    BORDER-RIGHT: #bbbbbb 1px solid;
    PADDING-RIGHT: 0px;
    BORDER-TOP: #bbbbbb 1px solid;
    DISPLAY: block;
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    MARGIN-BOTTOM: -1px;
    MARGIN-LEFT: AUTO;
    BORDER-LEFT: #bbbbbb 1px solid;
    COLOR: #000000;
    MARGIN-RIGHT: AUTO;
    PADDING-TOP: 4px;
    BORDER-BOTTOM: #bbbbbb 1px solid;
    FONT-FAMILY: Tahoma;
    POSITION: relative;
    HEIGHT: 2.25em;
    WIDTH: 95%;
    TEXT-INDENT: 10px;
    BACKGROUND-COLOR: #B8B8B8;
">Data Center Enclosures: 4</h2>        <div style="
    BORDER-RIGHT: #bbbbbb 1px solid;
    BORDER-TOP: #bbbbbb 1px solid;
    PADDING-LEFT: 0px;
    FONT-SIZE: 8pt;
    MARGIN-BOTTOM: -1px;
    PADDING-BOTTOM: 5px;
    MARGIN-LEFT: AUTO;
    BORDER-LEFT: #bbbbbb 1px solid;
    WIDTH: 95%;
    COLOR: #000000;
    MARGIN-RIGHT: AUTO;
    PADDING-TOP: 4px;
    BORDER-BOTTOM: #bbbbbb 1px solid;
    FONT-FAMILY: Tahoma;
    POSITION: relative;
    BACKGROUND-COLOR: #f9f9f9
"><TABLE id="9"><style>tr:nth-child(even) { background-color: #E5E5E5; TABLE-LAYOUT: Fixed; FONT-SIZE: 100%; WIDTH: 100%;}</style>
<colgroup>
<col/><col/>
<col/><col/>
</colgroup> 
<tr><th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Name</th>
<th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Status</th>
<th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">PowerStatus</th>
<th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">CoolingStatus</th>
</tr> 
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 1 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
</tr> 
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 2 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td></tr> 
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 3 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td></tr>
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 4 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
</tr> 
</table>    
</DIV>
    <div style="
    BORDER-RIGHT: medium none; 
    BORDER-TOP: medium none; 
    DISPLAY: block; 
    BACKGROUND: none transparent scroll repeat 0% 0%; 
    MARGIN-BOTTOM: -1px; 
    FONT: 100%/8px Tahoma; 
    MARGIN-LEFT: 43px; 
    BORDER-LEFT: medium none; 
    COLOR: #ffffff; 
    MARGIN-RIGHT: 0px; 
    PADDING-TOP: 4px; 
    BORDER-BOTTOM: medium none; 
    POSITION: relative"></div>     
</body>
</html>

Answer 1

有很多方法 - 插入图像或使用背景图像或创建边框半径的矩形，如下所示：

.round {
  width: 12px;
  height: 12px;
  background: red;
  border-radius: 6px;
}

.round.inactive {
  display: none;
}

见这里：https://jsbin.com/suxazonuyi/1/edit?html,output

您所要做的就是在所有停止灯元素上设置课程round，然后设置或删除课程inactive：

    <li onclick="ShowHide('first')"><span id="first" class="round"></span></li>

Answer 2

您可以迭代td并使用按钮替换OK：

var td = [].slice.call(document.querySelectorAll('td'));
td.forEach(function(td) {
  if (td.innerHTML == 'OK') {
    td.innerHTML = '<button class="red_stoplight"></button>';
  }
});

.red_stoplight {
  background-color: red;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  padding: 0;
}

<TABLE id="9"><style>tr:nth-child(even) { background-color: #E5E5E5; TABLE-LAYOUT: Fixed; FONT-SIZE: 100%; WIDTH: 100%;}</style>
<colgroup>
<col/><col/>
<col/><col/>
</colgroup> 
<tr><th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Name</th>
<th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Status</th>
<th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">PowerStatus</th>
<th style= "COLOR: #2E9AFE; FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">CoolingStatus</th>
</tr> 
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 1 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
</tr> 
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 2 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td></tr> 
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 3 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td></tr>
<tr>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">Enclosure: 4 </td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
<td style= "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt;">OK</td>
</tr> 
</TABLE>

如何在表格单元格中显示“红色警示灯”按钮？

2 个答案: