javaScript 删除事件 弹出确认 取消对话框

最常用的方法

if (window.confirm('你确定删除?')) {
            alert("确定");
            return true;
            // ajax请求删除接口(上面内容直接删除即可)
        } else {
            alert("取消");
            return false;
            // 不做任何操作(上面内容直接删除即可)
        }

方法一

<a href="javascript:if(confirm('确实要删除?'))location='http://www.baidu.com'">删除</a>

方法二

<script language="JavaScript">
        function delete_confirm(e) {
            if (event.srcElement.outerText == "删除") {
                event.returnValue = confirm("删除是不可恢复的,你确认要删除吗?");
            }
        }
        document.onclick = delete_confirm;
    </script>

    <a href="baidu.com" onClick="delete_confirm">删除</a>

方法三

<script language="JavaScript">
        
        document.onclick = delete_confirm;
        function delete_confirm() {
            event.returnValue = confirm("删除是不可恢复的,你确定删除?");
        }

    </script>

    <a href="baidu.com" onClick="delete_confirm">删除</a>

参考链接:https://www.cnblogs.com/seven-ahz/p/6533638.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 好的,这个任务可以分为以下几个步骤来实现: 1. 设计页面结构,包括菜单列表、点餐记录列表和对话框等元素。 2. 使用JavaScript代码实现点餐按钮的点击事件弹出对话框页面。 3. 在对话框页面中添加表单元素,用于输入点餐信息。 4. 点击对话框中的确定按钮后,将输入的点餐信息添加到点餐记录列表中。 5. 实现删除点餐记录的功能,包括弹出确认框、确认删除记录、取消后不删除记录。 6. 实现修改点餐记录的功能,包括弹出对话框、填充原有数据、保存修改后的数据。 下面是一个简单的示例代码,供参考: HTML部分: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淄博烧烤季点餐页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>淄博烧烤季点餐页面</h1> <!-- 菜单列表 --> <h2>菜单列表</h2> <ul id="menuList"> <li><span>烤羊肉串</span><button onclick="order('烤羊肉串')">点餐</button></li> <li><span>烤牛肉串</span><button onclick="order('烤牛肉串')">点餐</button></li> <li><span>烤鸡翅</span><button onclick="order('烤鸡翅')">点餐</button></li> <li><span>烤鱿鱼</span><button onclick="order('烤鱿鱼')">点餐</button></li> </ul> <!-- 点餐记录列表 --> <h2>点餐记录</h2> <table id="orderList"> <tr> <th>菜名</th> <th>数量</th> <th>价格</th> <th>操作</th> </tr> </table> <!-- 对话框 --> <div id="dialog" class="hidden"> <form> <label>菜名:</label> <input type="text" id="foodName" required> <br> <label>数量:</label> <input type="number" id="foodNum" min="1" required> <br> <label>价格:</label> <input type="number" id="foodPrice" min="0" required> <br> <button type="button" onclick="saveOrder()">确定</button> <button type="button" onclick="hideDialog()">取消</button> </form> </div> <!-- 删除确认框 --> <div id="confirm" class="hidden"> <p>确定删除这条点餐记录吗?</p> <button type="button" onclick="deleteOrder()">确定</button> <button type="button" onclick="hideConfirm()">取消</button> </div> <script src="script.js"></script> </body> </html> ``` CSS部分: ```css .hidden { display: none; } #orderList { border-collapse: collapse; } #orderList th, #orderList td { padding: 5px; border: 1px solid black; text-align: center; } #orderList th { background-color: #eee; } #dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border: 1px solid black; } #confirm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border: 1px solid black; } ``` JavaScript部分: ```javascript var orderList = []; // 点餐记录数组 // 点餐函数,添加点餐记录 function order(foodName) { // 显示对话框 showDialog(); document.getElementById("foodName").value = foodName; document.getElementById("foodNum").value = 1; document.getElementById("foodPrice").value = getPrice(foodName); } // 获取菜品价格 function getPrice(foodName) { switch(foodName) { case "烤羊肉串": return 5; case "烤牛肉串": return 6; case "烤鸡翅": return 4; case "烤鱿鱼": return 8; } } // 显示对话框 function showDialog() { document.getElementById("dialog").classList.remove("hidden"); } // 隐藏对话框 function hideDialog() { document.getElementById("dialog").classList.add("hidden"); } // 保存点餐记录 function saveOrder() { var foodName = document.getElementById("foodName").value; var foodNum = parseInt(document.getElementById("foodNum").value); var foodPrice = parseInt(document.getElementById("foodPrice").value); // 添加到点餐记录数组 orderList.push({ name: foodName, num: foodNum, price: foodPrice }); // 刷新点餐记录列表 renderOrderList(); // 隐藏对话框 hideDialog(); } // 刷新点餐记录列表 function renderOrderList() { var table = document.getElementById("orderList"); table.innerHTML = "<tr><th>菜名</th><th>数量</th><th>价格</th><th>操作</th></tr>"; for(var i=0; i<orderList.length; i++) { var order = orderList[i]; var tr = document.createElement("tr"); var tdName = document.createElement("td"); tdName.innerHTML = order.name; tr.appendChild(tdName); var tdNum = document.createElement("td"); tdNum.innerHTML = order.num; tr.appendChild(tdNum); var tdPrice = document.createElement("td"); tdPrice.innerHTML = order.price; tr.appendChild(tdPrice); var tdOp = document.createElement("td"); var btnEdit = document.createElement("button"); btnEdit.innerHTML = "编辑"; btnEdit.onclick = (function(index) { // 使用闭包保存当前索引 return function() { editOrder(index); }; })(i); tdOp.appendChild(btnEdit); var btnDelete = document.createElement("button"); btnDelete.innerHTML = "删除"; btnDelete.onclick = (function(index) { // 使用闭包保存当前索引 return function() { showConfirm(index); }; })(i); tdOp.appendChild(btnDelete); tr.appendChild(tdOp); table.appendChild(tr); } } // 显示删除确认框 function showConfirm(index) { document.getElementById("confirm").classList.remove("hidden"); document.getElementById("confirm").setAttribute("data-index", index); } // 隐藏删除确认框 function hideConfirm() { document.getElementById("confirm").classList.add("hidden"); document.getElementById("confirm").removeAttribute("data-index"); } // 删除点餐记录 function deleteOrder() { var index = parseInt(document.getElementById("confirm").getAttribute("data-index")); orderList.splice(index, 1); renderOrderList(); hideConfirm(); } // 编辑点餐记录 function editOrder(index) { // 显示对话框 showDialog(); // 填充原有数据 document.getElementById("foodName").value = orderList[index].name; document.getElementById("foodNum").value = orderList[index].num; document.getElementById("foodPrice").value = orderList[index].price; // 替换确定按钮的事件处理函数 var btnOk = document.querySelector("#dialog button[type='button']:first-child"); btnOk.onclick = function() { saveEdit(index); }; } // 保存修改后的点餐记录 function saveEdit(index) { var foodName = document.getElementById("foodName").value; var foodNum = parseInt(document.getElementById("foodNum").value); var foodPrice = parseInt(document.getElementById("foodPrice").value); // 更新点餐记录数组 orderList[index].name = foodName; orderList[index].num = foodNum; orderList[index].price = foodPrice; // 刷新点餐记录列表 renderOrderList(); // 隐藏对话框 hideDialog(); } // 初始化页面 renderOrderList(); ``` ### 回答2: 利用JavaScript实现淄博烧烤季的点餐页面,可以按照以下步骤来完成: 1. 首先,创建一个HTML页面,包含点餐按钮、点餐记录的显示区域和删除按钮。为点餐按钮和删除按钮添加对应的id属性。 2. 使用JavaScript编写按钮的点击事件。当点餐按钮被点击时,弹出一个对话框页面,询问用户的点餐信息。在对话框页面中添加确定按钮和取消按钮。 3. 当确定按钮被点击时,获取用户输入的点餐信息,并将其添加到点餐记录中,然后在点餐记录的显示区域中显示出来。 4. 当删除按钮被点击时,弹出一个对话框页面,确认是否删除点餐记录。在对话框页面中添加确定按钮和取消按钮。 5. 当确定按钮被点击时,从点餐记录中删除对应的记录,并更新点餐记录的显示区域。 6. 当取消按钮被点击时,关闭对话框页面,不做任何操作。 7. 在点餐记录的显示区域中,为每个记录添加修改按钮。当修改按钮被点击时,弹出一个对话框页面,显示该条点餐记录的详细信息。 8. 在对话框页面中,用户可以修改点餐记录的信息,并点击确定按钮进行保存。保存后,更新点餐记录的显示区域。 这样,就可以实现淄博烧烤季的点餐页面,包括点餐、删除和修改功能。注意在编写JavaScript代码时,需要使用相关的DOM操作方法来实现对HTML元素的获取和修改。 ### 回答3: 在利用JavaScript实现淄博烧烤季点餐页面时,可以通过以下步骤来实现点餐按钮事件、添加点餐记录、删除点餐记录以及修改点餐记录的功能。 首先,在点餐按钮点击事件中,可以通过弹出对话框的形式展示点餐页面。可以使用JavaScript中的alert、confirm或者自定义弹窗等方式来实现。用户点击确定按钮后,可以将点餐信息保存到点餐记录页面。 其次,在添加点餐记录页面,可以使用JavaScript动态创建DOM元素,展示点餐记录的详细信息。可以创建一个记录表格,每次点餐时向表格中添加一行数据,并为每行数据添加删除和修改按钮。点餐记录数据可以使用JavaScript数组来保存。 再次,在删除点餐记录功能中,可以通过点击删除按钮触发事件弹出确认对话框。用户点击确认按钮后,从点餐记录页面中删除对应的记录行。这可以通过从数组中删除对应的数据,并重新渲染表格来实现。若用户点击取消按钮,则不进行任何操作。 最后,在修改点餐记录功能中,可以通过点击修改按钮触发事件弹出对应记录的对话框。用户可以在对话框中修改相关信息,并点击确认按钮保存修改后的数据。这可以通过更新数组中对应的数据,并重新渲染表格来完成。 总结起来,通过利用JavaScript,我们可以实现淄博烧烤季点餐页面的点餐按钮事件,点餐记录的添加、删除和修改功能,以提供更好的用户体验和便捷的点餐操作

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值