如何在表格單元格中顯示「紅色交通燈」按鈕？

我正在運行腳本來輪詢健康狀態（電源，冷卻等）的數據中心中的4個機箱。數據存儲在一個數組中，然後通過管道傳輸到html以獲得清晰的外觀。最終我想要去一個儀表板。現在我想要一個'Red Stoplight'按鈕出現，如果輪詢不是字符串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>

來源

2016-02-19 allendks45

你想要做什麼是絕對有可能。你有控制HTML嗎？ CSS？ JS？避免內聯樣式將是一個非常好的開始。僅供參考：您已將此HTML5標記爲使用框架集文檔類型（即HTML4）。 –

保存自己的頭痛，擺脫內聯樣式，並讓他們上課。所以當你需要更新一個尺寸的時候，你在20個地方沒有做到，只有一個。如果你不控制這個，抱歉你必須繼承那個混亂。所以你需要有一些JavaScript來查看錶格，並查找非正確的字符串，並在該行上設置樣式。 – epascarello

在每個單元格中包含紅色圓圈並將其默認爲顯示：無。然後，您只需將其更改爲顯示：根據您的標準進行內聯。此外，腳本標記不應位於頭部或身體內部的任何位置。你有它之前的頭。 –

可以遍歷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>

來源

2016-02-19 19:23:19 jcubic

我認爲這會奏效！我的JS技能僅僅略高於新手，所以有很大的提升空間。希望當我能夠在民意調查中建立更多指標時，我將能夠展示幾種不同的按鈕顏色。我的最終目標是有一個簡單的儀表板，顯示這些狀態與html/text/css按鈕。謝謝！ – allendks45

但是，對於輔助功能，您還應該在按鈕內放置一個_word_，例如，綠色按鈕中的「OK」，紅色按鈕中的「ERR」... [紅色/綠色盲]（https：// nei。 nih.gov/health/color_blindness/facts_about#5）發生在7-10％的男性中，因此僅通過使用顏色顯示狀態對於重要人羣而言是丟失的。 –

我正在考慮這個後運行。當我輪詢機箱時，他們實際上報告的降級狀態我覺得可以用琥珀色的停車燈來表示。有一個紅色，綠色或琥珀色指示器不會給我100％的地位。因此，如果狀態回退，我該如何添加琥珀色按鈕並保持文本？ – allendks45

有很多的方式 - 插入圖像或使用背景圖片或使用邊界半徑，像這樣創建矩形：

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

.round.inactive { 
    display: none; 
}

見https://jsbin.com/suxazonuyi/1/edit?html,output

您所要做的就是在所有stoplight元素上設置類round並設置或拿走類inactive：

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

來源

2016-02-19 19:20:45

如何在表格單元格中顯示「紅色交通燈」按鈕？

回答

相關問題