利用JavaScript实现淄博烧烤季点餐页面，点餐按钮事件实现弹出对话框页面，确定后添加点餐记录页面，能够删除点餐记录，点击删除按钮弹出对话框，确定后删除记录，取消后没有删除记录，能够修改点餐记录
时间: 2023-06-27 09:07:12 浏览: 47
好的，这个需求比较详细，需要分别实现弹出对话框、添加记录、删除记录和修改记录这几个功能。下面我将逐步进行代码实现。
首先，我们需要在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] <!– //
JavaScript动态改变HTML页面元素例如添加或删除
HTML页面元素可以通过js动态改变，比如可以向HTML中添加元素或删除某个元素，下面为示例代码，感兴趣的朋友不要错过
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
但有时候，需要当某事件触发时，我们先做一些操作，然后再跳转，这时，就要用JAVASCRIPT来实现这一跳转功能。 下面是具体的做法： 一：跳转到新页面，并且是在新窗口中打开时: 代码如下: function gogogo() { //do ...
JavaScript实现自动弹出窗口并自动关闭窗口的方法
这里介绍的JavaScript自动弹出窗口并自动关闭窗口，JS实现此特效似乎很简单，打开网页后即显示一个弹出窗口，之后会自动离开，使用了window.open和document.open();以及document.close();对象共同来实现，现在似乎用...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
【实战演练】MATLAB用遗传算法改进粒子群GA-PSO算法
# 2.1 遗传算法的原理和实现
遗传算法（GA）是一种受生物进化过程启发的优化算法。它通过模拟自然选择和遗传机制来搜索最优解。
**2.1.1 遗传算法的编码和解码**
编码是将问题空间中的解表示为二进制字符串或其他数据结构的过程。解码是将编码的解转换为问题空间中的实际解的过程。常见的编码方法包括二进制编码、实数编码和树形编码。
**2.1.2 遗传算法的交叉和
openstack的20种接口有哪些
以下是OpenStack的20种API接口：
1. Identity (Keystone) API
2. Compute (Nova) API
3. Networking (Neutron) API
4. Block Storage (Cinder) API
5. Object Storage (Swift) API
6. Image (Glance) API
7. Telemetry (Ceilometer) API
8. Orchestration (Heat) API
9. Database (Trove) API
10. Bare Metal (Ironic) API
11. DNS
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。