Java 操作 XML 動態生成級聯選單：JSP 實作範例

本文提供一個名為 Menu.JSP 的完整原始碼範例，展示如何結合 JavaScript 與 DOM 操作，動態新增/刪除選單項目與子選單。程式碼包含樣式定義與三個核心函數：

程式碼結構

menu
.btn input{
    background:#FF6600;
    border-left:1px #FFFFFF solid;
    border-top:1px #FFFFFF solid;
    border-right:1px #990000 solid;
    border-bottom:1px #990000 solid;
    padding-top:4px;
    color:#FFFFFF;
}
function newItem(ele){
    var pNode, pdiv;
    var item_name, item_url, item_tip;
    var text1, text2, text3;
    pNode = ele.parentNode;
    pdiv = document.createElement("");
    item_hidden = document.createElement("");
    text1 = document.createTextNode("子選單名稱：");
    item_name = document.createElement("");
    text2 = document.createTextNode("子選單URL：");
    item_url = document.createElement("");
    text3 = document.createTextNode("子選單連結說明：");
    item_tip = document.createElement("");
    pdiv.appendChild(item_hidden);
    pdiv.appendChild(text1);
    pdiv.appendChild(item_name);
    pdiv.appendChild(text2);
    pdiv.appendChild(item_url);
    pdiv.appendChild(text3);
    pdiv.appendChild(item_tip);
    pdiv.appendChild(document.createElement(""));
    pNode.appendChild(pdiv);
}
function delItem(ele){
    var pNode = ele.parentNode.parentNode;
    var pdiv = ele.parentNode;
    pNode.removeChild(pdiv);
}
function newMenu(ele){
    var pNode = ele.parentNode.parentNode;
    var pdiv = document.createElement("");
    var text1, menunameElement, newmenuBtnElement, delmenuBenElement;
    text1 = document.createTextNode(" 選單:");
    menunameElement = document.createElement("");
    newmenuBtnElement = document.createElement(" ");
    delmenuBenElement = document.createElement("");
    pdiv.appendChild(text1);
    pdiv.appendChild(menunameElement);
    pdiv.appendChild(delmenuBenElement);
    pdiv.appendChild(newmenuBtnElement);
    pNode.insertBefore(pdiv, document.getElementById("btn"));
}

功能解析

• newItem：在現有選單項目下動態新增子選單輸入欄位（名稱、URL、提示文字）
• delItem：移除指定的選單項目節點
• newMenu：在頂層插入新的主選單區塊，包含名稱輸入與新增/刪除按鈕

此範例展示了在 JSP 頁面中嵌入 JavaScript 進行動態 DOM 操作的基本模式，可作為後台管理介面動態選單編輯功能的起點。實際部署時建議搭配伺服端 XML 解析，實現資料持久化。