利用javascript动态表格制作一个点餐界面
时间: 2023-09-13 13:04:50 浏览: 51
好的,我可以为你提供一些关于利用JavaScript动态制作点餐界面的信息。
首先,动态制作表格可以使用DOM(文档对象模型)来实现。以下是简单的代码示例:
HTML:
```
<table>
<thead>
<tr>
<th>菜名</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody id="menu-list"></tbody>
</table>
<button id="add-menu-item">添加菜品</button>
<button id="submit-order">提交订单</button>
```
JavaScript:
```
let menuList = document.getElementById("menu-list");
let addMenuItemButton = document.getElementById("add-menu-item");
let submitOrderButton = document.getElementById("submit-order");
addMenuItemButton.addEventListener("click", () => {
let newRow = document.createElement("tr");
newRow.innerHTML = `
<td><input type="text" name="dish"></td>
<td><input type="number" name="quantity" min="1"></td>
<td><input type="text" name="price"></td>
`;
menuList.appendChild(newRow);
});
submitOrderButton.addEventListener("click", () => {
let orderDetails = [];
// 获取表格中每一行的数据
for (let i = 0; i < menuList.rows.length; i++) {
let dish = menuList.rows[i].querySelector("input[name='dish']").value;
let quantity = menuList.rows[i].querySelector("input[name='quantity']").value;
let price = menuList.rows[i].querySelector("input[name='price']").value;
orderDetails.push({ dish: dish, quantity: quantity, price: price });
}
// 在控制台打印订单详细信息
console.log(orderDetails);
});
```
这个示例中,我们首先创建一个空的`tbody`元素来存放点餐菜单项目。在JavaScript中,我们获取到这个元素并将其作为一个变量来使用。我们还获取了两个按钮元素,分别用于添加菜品和提交订单。
添加菜品按钮添加了一个点击监听器,当点击按钮时会创建一个新的表格行,并添加输入框来输入菜名、数量和价格。这个新的行是通过`createElement()`方法和`innerHTML`属性来创建的。
提交订单按钮也添加了一个点击监听器。当点击这个按钮时,我们遍历整个菜单列表,并使用`querySelector()`方法获取到含有菜名、数量和价格的`input`元素。我们将得到的值添加到一个`orderDetails`数组中,最后将其打印到控制台。
以上是一个简单的动态制作点餐界面的方法,您可以按照实际需求进行修改和完善。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)