如何使用JavaScript实现编辑按钮功能及修复取消按钮删错订单问题

1 取消按钮删错项问题修复 #

核心原因 #

• 所有动态生成的订单元素使用了重复的id属性，HTML规范要求id全局唯一，document.getElementById只会匹配到第一个出现的对应id元素，因此无论点击哪一行的取消按钮，都会默认删除首行数据
• 同一条订单的不同字段分散在四个独立容器中，没有做行级关联，无法直接定位目标行的所有关联元素

修复&功能实现代码 #

以下为完整的修改后JS代码，同时内置了编辑功能逻辑：

// 全局变量，记录当前编辑的行索引，-1表示新增状态
let editIndex = -1;
const addBtn = document.getElementById('addBtn');

function addMyOrder() {
    let myOrder = document.querySelector(".myOrder").value;
    let orderType = document.querySelector(".orderType").value;
    let orderQty = document.querySelector(".orderQty").value;
    // 基础输入校验
    if (!myOrder || !orderType || !orderQty || orderQty < 1) {
        alert('请完善全部订单信息');
        return;
    }

    // 编辑模式：覆盖对应行的原有数据
    if (editIndex > -1) {
        document.querySelectorAll('#forOrder p')[editIndex].textContent = myOrder;
        document.querySelectorAll('#forOrderType p')[editIndex].textContent = orderType;
        document.querySelectorAll('#forQuantity p')[editIndex].textContent = orderQty;
        // 重置编辑状态
        editIndex = -1;
        addBtn.textContent = 'Add';
        // 清空输入项
        document.querySelector(".myOrder").selectedIndex = 0;
        document.querySelector(".orderType").selectedIndex = 0;
        document.querySelector(".orderQty").value = '';
        return;
    }

    // 新增模式：插入新订单行
    const para1 = document.createElement("p");
    para1.textContent = myOrder;
    document.getElementById("forOrder").appendChild(para1);

    const para2 = document.createElement("p");
    para2.textContent = orderType;
    document.getElementById("forOrderType").appendChild(para2);

    const para3 = document.createElement("p");
    para3.textContent = orderQty;
    document.getElementById("forQuantity").appendChild(para3);

    const btnContainer = document.getElementById("forBtn");
    const editBtn = document.createElement("input");
    editBtn.type = "button";
    editBtn.value = "Edit";
    editBtn.className = "btn btn-outline-primary btn-sm me-2 mb-2";
    editBtn.addEventListener('click', editOrder);
    btnContainer.appendChild(editBtn);

    const delBtn = document.createElement("input");
    delBtn.type = "button";
    delBtn.value = "Cancel";
    delBtn.className = "btn btn-outline-danger btn-sm me-3 mb-2";
    delBtn.addEventListener('click', cancelOrder);
    btnContainer.appendChild(delBtn);

    // 清空输入项
    document.querySelector(".myOrder").selectedIndex = 0;
    document.querySelector(".orderType").selectedIndex = 0;
    document.querySelector(".orderQty").value = '';
}

function cancelOrder(e) {
    let confirmAction = confirm("Are you sure you want to cancel this order?");
    if (confirmAction) {
        // 定位当前点击的删除按钮的行索引
        const delBtns = Array.from(document.querySelectorAll('#forBtn input[value="Cancel"]'));
        const index = delBtns.indexOf(e.target);
        // 批量删除对应行的所有关联元素
        document.querySelectorAll('#forOrder p')[index].remove();
        document.querySelectorAll('#forOrderType p')[index].remove();
        document.querySelectorAll('#forQuantity p')[index].remove();
        // 删除对应行的编辑、取消按钮
        document.querySelectorAll('#forBtn input')[index*2].remove();
        document.querySelectorAll('#forBtn input')[index*2].remove();
    } else {
        alert("Order is not cancelled.");
    }
}

function editOrder(e) {
    let confirmAction = confirm("Are you sure you want to edit this order?");
    if (confirmAction) {
        // 定位当前点击的编辑按钮的行索引
        const editBtns = Array.from(document.querySelectorAll('#forBtn input[value="Edit"]'));
        editIndex = editBtns.indexOf(e.target);
        // 把原有订单数据回填到顶部输入框
        const order = document.querySelectorAll('#forOrder p')[editIndex].textContent;
        const type = document.querySelectorAll('#forOrderType p')[editIndex].textContent;
        const qty = document.querySelectorAll('#forQuantity p')[editIndex].textContent;
        
        // 匹配下拉选择框的原有选项
        const orderSelect = document.querySelector(".myOrder");
        Array.from(orderSelect.options).forEach(opt => {
            if (opt.value === order) opt.selected = true;
        });
        const typeSelect = document.querySelector(".orderType");
        Array.from(typeSelect.options).forEach(opt => {
            if (opt.value === type) opt.selected = true;
        });
        document.querySelector(".orderQty").value = qty;
        // 切换添加按钮为更新状态
        addBtn.textContent = 'Update';
    } else {
        alert("Order is not edited")
    }
}

2 编辑功能说明 #

上述代码已经完整实现了编辑需求：

• 点击对应行的编辑按钮后，原有订单数据会自动回填到顶部的选择框和输入框中
• 添加按钮会自动切换为「Update」按钮，修改内容后点击即可覆盖原订单数据
• 更新完成后按钮自动切回「Add」状态，可继续新增订单

内容的提问来源于stack exchange，提问作者MOHAMMAD SIDDIQUE