暉獲無度的步烙閣

之前因為長官的關係，有用 Python 去撈 VC（VMware vCenter Sever）的資訊，後來連介接的儲存空間，也一併撈取，並轉成 html 網頁供同事查詢。不過，因為資訊有些不是隨時要看的。所以，就需要隱藏一些欄位，避免資料量太多，呵！

相關：von_blog、stackoverflow 1 2、ITREAD01

上網查了很多資訊，就整理一下囉！呵！

一個按鈕可以顯示或隱藏欄位的 JS 如下：

//顯示&隱藏物件
function openShutManager(oSourceObj,oTargetObj,shutAble,buttonID,changeValue){
　　var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
　　var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
　　if(targetObj.style.display != "none"){
　　　if(!shutAble) return;
　　　targetObj.style.display = "none";
　　} else {
　　　targetObj.style.display = "table-row";
　　}
   //button 物件的值進行切換
　　var elem = document.getElementById(buttonID)
　　if (elem.value==="顯示"+changeValue) elem.value = "隱藏"+changeValue;
　　else elem.value = "顯示"+changeValue;
}

這個 function 有五個參數要傳，原來的只有三個而已。後面兩個是因為我有好幾個按鈕跟要顯示的按鈕名字不一樣需要的。因為 JavaScript 不熟，所以只能依樣畫葫蘆，呵！有兩個目前是固定的，有三個參數解釋如下：
oTargetObj：要顯示/隱藏物件的 id，本例為 dyn_tr4
buttonID：這個按鈕的 id，本例為 button4
changeValue：要顯示/隱藏的按鈕名稱，本例為 SSD

展開後的最下方，有個「隱藏」按鈕的 JS 如下：

//隱藏TR
function hide_tr(TRID,buttonID,changeValue)
{
　　//alert(TRID);
　　var result_style = document.getElementById(TRID).style;
　　result_style.display = 'none';
   //button 物件的值進行切換
　　var elem = document.getElementById(buttonID);
　　if (elem.value==="顯示"+changeValue) elem.value = "隱藏"+changeValue;
　　else elem.value = "顯示"+changeValue;
}

這個 function 有三個參數要傳，原來只有一個。後面兩個是因為要跟上面的按鈕連動（只有上面的按鈕值需要變動）。按了這個按鈕，那上方的按鈕名稱，就要從「隱藏XX」改成「顯示XX」，參數解釋如下：
TRID：要隱藏物件的 id，本例為 dyn_tr4
buttonID：要連動的按鈕 id，本例為 button4
changeValue：要變更的按鈕名稱，本例為 SSD

下面的 html 原始碼，就是要擺放的位置：

這個是「顯示XX」按鈕語法：

<input id="button4" type="button" value="顯示SSD" onclick="openShutManager(this,'dyn_tr4',true,'button4','SSD')">

這個是要隱藏的物件（上面整個黃色框框）語法：

<TR id="dyn_tr4" style="display: none;">

這個是隱藏物件最下方的「隱藏XX」按鈕語法：

<input id="button5" type="button" value="隱藏" style="width:100%" onclick="hide_tr('dyn_tr4','button4','SSD')">

記錄一下，以後有用時，就可以直接來看，免得還要去翻舊的記錄。

20220124