利用JavaScript实现淄博烧烤季点餐页面,点餐按钮事件实现弹出对话框页面,确定后添加点餐记录页面,能够删除点餐记录,点击删除按钮弹出对话框,确定后删除记录,取消后没有删除记录,能够修改点餐记录

时间: 2023-06-27 13:07:12 浏览: 42
好的,这个需求比较详细,需要分别实现弹出对话框、添加记录、删除记录和修改记录这几个功能。下面我将逐步进行代码实现。 首先,我们需要在HTML页面中创建点餐按钮和点餐记录表格: ```html <!DOCTYPE html> <html> <head> <title>淄博烧烤季点餐页面</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>淄博烧烤季点餐页面</h1> <button id="order-btn">点餐</button> <table> <thead> <tr> <th>菜品</th> <th>数量</th> <th>价格</th> <th>操作</th> </tr> </thead> <tbody id="order-list"> </tbody> </table> <div id="order-dialog" class="dialog"> <h2>点餐</h2> <label for="dish-input">菜品:</label> <input type="text" id="dish-input" placeholder="请输入菜品名称"> <label for="quantity-input">数量:</label> <input type="number" id="quantity-input" placeholder="请输入数量"> <label for="price-input">价格:</label> <input type="number" id="price-input" placeholder="请输入价格"> <button id="confirm-btn">确定</button> <button id="cancel-btn">取消</button> </div> <div id="delete-dialog" class="dialog"> <h2>删除记录</h2> <p>确定要删除该记录吗?</p> <button id="delete-confirm-btn">确定</button> <button id="delete-cancel-btn">取消</button> </div> <div id="modify-dialog" class="dialog"> <h2>修改记录</h2> <label for="modify-dish-input">菜品:</label> <input type="text" id="modify-dish-input" placeholder="请输入菜品名称"> <label for="modify-quantity-input">数量:</label> <input type="number" id="modify-quantity-input" placeholder="请输入数量"> <label for="modify-price-input">价格:</label> <input type="number" id="modify-price-input" placeholder="请输入价格"> <button id="modify-confirm-btn">确定</button> <button id="modify-cancel-btn">取消</button> </div> <script src="script.js"></script> </body> </html> ``` 在CSS文件中,我们可以对弹出对话框进行样式设置,如下所示: ```css .dialog { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; background-color: white; border: 1px solid black; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .dialog h2 { margin-top: 0; } .dialog label { display: inline-block; width: 60px; } .dialog input { margin-bottom: 10px; } .dialog button { margin-left: 10px; } ``` 接下来,我们开始编写JavaScript代码。首先,我们需要获取页面中的元素: ```javascript const orderBtn = document.getElementById('order-btn'); const orderList = document.getElementById('order-list'); const orderDialog = document.getElementById('order-dialog'); const dishInput = document.getElementById('dish-input'); const quantityInput = document.getElementById('quantity-input'); const priceInput = document.getElementById('price-input'); const confirmBtn = document.getElementById('confirm-btn'); const cancelBtn = document.getElementById('cancel-btn'); const deleteDialog = document.getElementById('delete-dialog'); const deleteConfirmBtn = document.getElementById('delete-confirm-btn'); const deleteCancelBtn = document.getElementById('delete-cancel-btn'); const modifyDialog = document.getElementById('modify-dialog'); const modifyDishInput = document.getElementById('modify-dish-input'); const modifyQuantityInput = document.getElementById('modify-quantity-input'); const modifyPriceInput = document.getElementById('modify-price-input'); const modifyConfirmBtn = document.getElementById('modify-confirm-btn'); const modifyCancelBtn = document.getElementById('modify-cancel-btn'); ``` 然后,我们需要为点餐按钮添加点击事件,使其能够弹出点餐对话框: ```javascript orderBtn.addEventListener('click', () => { orderDialog.style.display = 'block'; }); ``` 接着,我们需要为点餐对话框中的确定按钮添加点击事件,使其能够添加点餐记录到表格中: ```javascript confirmBtn.addEventListener('click', () => { const dish = dishInput.value.trim(); const quantity = parseInt(quantityInput.value); const price = parseFloat(priceInput.value); if (!dish || !quantity || !price) { alert('请填写完整的点餐信息!'); return; } const tr = document.createElement('tr'); tr.innerHTML = ` <td>${dish}</td> <td>${quantity}</td> <td>${price.toFixed(2)}</td> <td> <button class="delete-btn">删除</button> <button class="modify-btn">修改</button> </td> `; orderList.appendChild(tr); dishInput.value = ''; quantityInput.value = ''; priceInput.value = ''; orderDialog.style.display = 'none'; }); ``` 这里我们使用了 `innerHTML` 属性来创建一个新的表格行,并设置了菜品、数量、价格以及操作按钮。在添加操作按钮时,我们分别设置了删除按钮和修改按钮,并为它们添加类名,方便后续操作。 接下来,我们需要为删除按钮和修改按钮添加点击事件,分别弹出删除对话框和修改对话框: ```javascript orderList.addEventListener('click', (event) => { const target = event.target; if (target.classList.contains('delete-btn')) { deleteDialog.style.display = 'block'; } else if (target.classList.contains('modify-btn')) { modifyDialog.style.display = 'block'; } }); ``` 在这里,我们使用了事件委托的方式,只为订单列表添加一个点击事件,然后通过判断点击的元素是否包含删除按钮或修改按钮的类名,来决定弹出哪个对话框。 为了能够删除记录,我们需要为删除对话框中的确定按钮添加点击事件: ```javascript deleteConfirmBtn.addEventListener('click', () => { const tr = deleteDialog.parentElement; tr.parentElement.removeChild(tr); deleteDialog.style.display = 'none'; }); ``` 在这里,我们首先获取到当前要删除的表格行,然后从它的父元素中将其删除。 为了能够取消删除记录,我们需要为删除对话框中的取消按钮添加点击事件: ```javascript deleteCancelBtn.addEventListener('click', () => { deleteDialog.style.display = 'none'; }); ``` 类似地,我们还需要为修改对话框中的确定按钮和取消按钮添加点击事件: ```javascript modifyConfirmBtn.addEventListener('click', () => { const dish = modifyDishInput.value.trim(); const quantity = parseInt(modifyQuantityInput.value); const price = parseFloat(modifyPriceInput.value); if (!dish || !quantity || !price) { alert('请填写完整的点餐信息!'); return; } const tr = modifyDialog.parentElement; tr.children[0].textContent = dish; tr.children[1].textContent = quantity; tr.children[2].textContent = price.toFixed(2); modifyDishInput.value = ''; modifyQuantityInput.value = ''; modifyPriceInput.value = ''; modifyDialog.style.display = 'none'; }); modifyCancelBtn.addEventListener('click', () => { modifyDialog.style.display = 'none'; }); ``` 在这里,我们首先获取到当前要修改的表格行,然后将其中的菜品、数量和价格分别修改为修改对话框中输入的值。 至此,我们就完成了点餐页面的JavaScript代码编写。完整代码如下所示: ```javascript const orderBtn = document.getElementById('order-btn'); const orderList = document.getElementById('order-list'); const orderDialog = document.getElementById('order-dialog'); const dishInput = document.getElementById('dish-input'); const quantityInput = document.getElementById('quantity-input'); const priceInput = document.getElementById('price-input'); const confirmBtn = document.getElementById('confirm-btn'); const cancelBtn = document.getElementById('cancel-btn'); const deleteDialog = document.getElementById('delete-dialog'); const deleteConfirmBtn = document.getElementById('delete-confirm-btn'); const deleteCancelBtn = document.getElementById('delete-cancel-btn'); const modifyDialog = document.getElementById('modify-dialog'); const modifyDishInput = document.getElementById('modify-dish-input'); const modifyQuantityInput = document.getElementById('modify-quantity-input'); const modifyPriceInput = document.getElementById('modify-price-input'); const modifyConfirmBtn = document.getElementById('modify-confirm-btn'); const modifyCancelBtn = document.getElementById('modify-cancel-btn'); orderBtn.addEventListener('click', () => { orderDialog.style.display = 'block'; }); confirmBtn.addEventListener('click', () => { const dish = dishInput.value.trim(); const quantity = parseInt(quantityInput.value); const price = parseFloat(priceInput.value); if (!dish || !quantity || !price) { alert('请填写完整的点餐信息!'); return; } const tr = document.createElement('tr'); tr.innerHTML = ` <td>${dish}</td> <td>${quantity}</td> <td>${price.toFixed(2)}</td> <td> <button class="delete-btn">删除</button> <button class="modify-btn">修改</button> </td> `; orderList.appendChild(tr); dishInput.value = ''; quantityInput.value = ''; priceInput.value = ''; orderDialog.style.display = 'none'; }); orderList.addEventListener('click', (event) => { const target = event.target; if (target.classList.contains('delete-btn')) { deleteDialog.style.display = 'block'; } else if (target.classList.contains('modify-btn')) { modifyDialog.style.display = 'block'; } }); deleteConfirmBtn.addEventListener('click', () => { const tr = deleteDialog.parentElement; tr.parentElement.removeChild(tr); deleteDialog.style.display = 'none'; }); deleteCancelBtn.addEventListener('click', () => { deleteDialog.style.display = 'none'; }); modifyConfirmBtn.addEventListener('click', () => { const dish = modifyDishInput.value.trim(); const quantity = parseInt(modifyQuantityInput.value); const price = parseFloat(modifyPriceInput.value); if (!dish || !quantity || !price) { alert('请填写完整的点餐信息!'); return; } const tr = modifyDialog.parentElement; tr.children[0].textContent = dish; tr.children[1].textContent = quantity; tr.children[2].textContent = price.toFixed(2); modifyDishInput.value = ''; modifyQuantityInput.value = ''; modifyPriceInput.value = ''; modifyDialog.style.display = 'none'; }); modifyCancelBtn.addEventListener('click', () => { modifyDialog.style.display = 'none'; }); ```

相关推荐

最新推荐

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

主要介绍了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法,涉及javascript鼠标事件及页面元素样式操作的相关技巧,需要的朋友可以参考下

JavaScript实现x秒后自动跳转到一个页面

今天看视频学习时学习了一种... 2、有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码: 代码如下: [removed] &lt;!– //

JavaScript动态改变HTML页面元素例如添加或删除

HTML页面元素可以通过js动态改变,比如可以向HTML中添加元素或删除某个元素,下面为示例代码,感兴趣的朋友不要错过

JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: 代码如下: function gogogo() { //do ...

JavaScript实现自动弹出窗口并自动关闭窗口的方法

这里介绍的JavaScript自动弹出窗口并自动关闭窗口,JS实现此特效似乎很简单,打开网页后即显示一个弹出窗口,之后会自动离开,使用了window.open和document.open();以及document.close();对象共同来实现,现在似乎用...

stc12c5a60s2 例程

stc12c5a60s2 单片机的所有功能的实例,包括SPI、AD、串口、UCOS-II操作系统的应用。

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

【迁移学习在车牌识别中的应用优势与局限】: 讨论迁移学习在车牌识别中的应用优势和局限

![【迁移学习在车牌识别中的应用优势与局限】: 讨论迁移学习在车牌识别中的应用优势和局限](https://img-blog.csdnimg.cn/direct/916e743fde554bcaaaf13800d2f0ac25.png) # 1. 介绍迁移学习在车牌识别中的背景 在当今人工智能技术迅速发展的时代,迁移学习作为一种强大的技术手段,在车牌识别领域展现出了巨大的潜力和优势。通过迁移学习,我们能够将在一个领域中学习到的知识和模型迁移到另一个相关领域,从而减少对大量标注数据的需求,提高模型训练效率,加快模型收敛速度。这种方法不仅能够增强模型的泛化能力,提升识别的准确率,还能有效应对数据

margin-top: 50%;

margin-top: 50%; 是一种CSS样式代码,用于设置元素的上边距(即与上方元素或父级元素之间的距离)为其父元素高度的50%。 这意味着元素的上边距将等于其父元素高度的50%。例如,如果父元素的高度为100px,则该元素的上边距将为50px。 请注意,这个值只在父元素具有明确的高度(非auto)时才有效。如果父元素的高度是auto,则无法确定元素的上边距。 希望这个解释对你有帮助!如果你还有其他问题,请随时提问。

Android通过全局变量传递数据

在Activity之间数据传递中还有一种比较实用的方式 就是全局对象 实用J2EE的读者来说都知道Java Web的四个作用域 这四个作用域从小到大分别是Page Request Session和Application 其中Application域在应用程序的任何地方都可以使用和访问 除非是Web服务器停止 Android中的全局对象非常类似于Java Web中的Application域 除非是Android应用程序清除内存 否则全局对象将一直可以访问 1 定义一个类继承Application public class MyApp extends Application 2 在AndroidMainfest xml中加入全局变量 android:name &quot; MyApp&quot; 3 在传数据类中获取全局变量Application对象并设置数据 myApp MyApp getApplication ; myApp setName &quot;jack&quot; ; 修改之后的名称 4 在收数据类中接收Application对象 myApp MyApp getApplication ;">在Activity之间数据传递中还有一种比较实用的方式 就是全局对象 实用J2EE的读者来说都知道Java Web的四个作用域 这四个作用域从小到大分别是Page Request Session和Application 其中Application域在应用程序的任何地方都可以使用和 [更多]