卡片模組動態編輯選單

by wllai2001

HTML

<div id="items"></div>
    <button type="button" onclick="addItem()">Add Item</button>
    <br><br>
    <label for="GoTOTITLE">Go To TITLE:</label>
    <input type="text" id="GoTOTITLE" oninput="updatePageData('GoTOTITLE', this.value)">
    <br>
    <label for="GOTOHREF">Go To HREF:</label>
    <input type="text" id="GOTOHREF" oninput="updatePageData('GOTOHREF', this.value)">
    <br><br>
    <textarea id="CardsDataTextBox" rows="10" cols="50" value=''>
      
      
      
    </textarea>

CSS

.item {
            margin-bottom: 10px;
            border: 1px solid #ccc;
            padding: 10px;
        }

JavaScript

var pageData = {
            GoTOTITLE: "",
            GOTOHREF: "",
            items: []
        };

        function addItem() {
            var newItem = {
                SRC: "",
                HREF: "",
                TITLE: "",
                Context: ""
            };
            pageData.items.push(newItem);
            renderItems();
        }

        function deleteItem(index) {
            pageData.items.splice(index, 1);
            renderItems();
        }

        function moveItemUp(index) {
            if (index > 0) {
                var temp = pageData.items[index];
                pageData.items[index] = pageData.items[index - 1];
                pageData.items[index - 1] = temp;
                renderItems();
            }
        }

        function moveItemDown(index) {
            if (index < pageData.items.length - 1) {
                var temp = pageData.items[index];
                pageData.items[index] = pageData.items[index + 1];
                pageData.items[index + 1] = temp;
                renderItems();
            }
        }

        function updateItem(index, field, value) {
            pageData.items[index][field] = value;
            renderItems();
        }

        function updatePageData(field, value) {
            pageData[field] = value;
            renderItems();
        }

        function renderItems() {
            var itemsContainer = document.getElementById("items");
            itemsContainer.innerHTML = "";

            pageData.items.forEach(function (item, index) {
                var itemDiv = document.createElement("div");
                itemDiv.classList.add("item");

                itemDiv.innerHTML = `
                    <label>Item ${index + 1}</label><br>
                    <input type="text" placeholder="SRC" value="${item.SRC}" oninput="updateItem(${index}, 'SRC', this.value)"><br>
                    <input type="text" placeholder="HREF" value="${item.HREF}" oninput="updateItem(${index},...