帮我制作网上订单页面。 单击“增加订单”按钮,可增加订单 行，可自己输入商品名称、数 量和单价，如图 4-27 所示。 单击“确定”按钮后,保存订单，“确 定”按钮变为“修改”按钮,如 单击“删除”按安钮可删除一条订单。单击“修改”按钮，可对商品的名称、数量和单价进行修改。html，javascipt
时间: 2023-09-27 14:07:02 浏览: 98
好的，以下是一个简单的网上订单页面的HTML和JavaScript代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>网上订单页面</title>
<script>
// 定义全局变量，用于记录订单数量和总金额
var count = 0;
var total = 0;
// 添加订单行
function addRow() {
// 获取表格对象
var table = document.getElementById("orderTable");
// 创建新行
var newRow = table.insertRow(-1);
// 创建新单元格
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
// 设置单元格内容
cell1.innerHTML = "<input type='text' name='name[]'>";
cell2.innerHTML = "<input type='number' name='quantity[]' min='1' value='1'>";
cell3.innerHTML = "<input type='number' name='price[]' min='0' step='0.01' value='0.00' onchange='updateTotal()'>";
cell4.innerHTML = "<button type='button' onclick='deleteRow(this)'>删除</button>";
// 更新订单数量和总金额
count++;
total += 0;
updateTotal();
}
// 删除订单行
function deleteRow(btn) {
// 获取按钮所在的行
var row = btn.parentNode.parentNode;
// 获取表格对象
var table = document.getElementById("orderTable");
// 删除行
table.deleteRow(row.rowIndex);
// 更新订单数量和总金额
count--;
total -= row.cells[2].getElementsByTagName("input")[0].value;
updateTotal();
}
// 更新总金额
function updateTotal() {
// 获取所有价格输入框的值
var prices = document.getElementsByName("price[]");
// 计算总金额
total = 0;
for (var i = 0; i < prices.length; i++) {
total += parseFloat(prices[i].value) * parseFloat(prices[i].parentNode.previousSibling.getElementsByTagName("input")[0].value);
}
// 更新显示
document.getElementById("total").innerHTML = total.toFixed(2);
}
</script>
</head>
<body>
<h1>网上订单页面</h1>
<table id="orderTable">
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="name[]"></td>
<td><input type="number" name="quantity[]" min="1" value="1"></td>
<td><input type="number" name="price[]" min="0" step="0.01" value="0.00" onchange="updateTotal()"></td>
<td><button type="button" onclick="deleteRow(this)">删除</button></td>
</tr>
</tbody>
</table>
<button type="button" onclick="addRow()">增加订单</button>
<button type="submit">保存订单</button>
<div>订单数量： <span id="count">1</span></div>
<div>订单总金额： ¥<span id="total">0.00</span></div>
</body>
</html>
```
这个页面中包含一个表格用于显示订单信息，两个按钮用于增加订单和保存订单，以及两个显示订单数量和总金额的区域。当用户点击“增加订单”按钮时，会调用JavaScript函数`addRow()`添加一行订单；当用户点击某一行订单的“删除”按钮时，会调用JavaScript函数`deleteRow()`删除该行订单；当用户修改某一行订单的价格时，会调用JavaScript函数`updateTotal()`更新订单总金额。在用户提交订单时，可以使用服务器端脚本来将订单数据保存到数据库中。
相关推荐
最新推荐
JavaScript实现点击按钮字体放大、缩小
本文给大家分享js实现点击按钮字体放大缩小实例代码，代码简单易懂，需要的朋友参考下吧 具体代码如下所示： <style> .bb{color:red;} .cc{color:green;} .chapter {font-size: 1.5em;} .normal{font-size:...
Vue监听事件实现计数点击依次增加的方法
今天小编就为大家分享一篇Vue监听事件实现计数点击依次增加的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js实现点赞按钮功能的实例代码
主要介绍了js实现点赞按钮功能,本文通过实例代码给大家介绍的非常详细，对大家的工作或学习具有一定的参考借鉴价值，需要的朋友可以参考下
JS中type=”button”和type=”submit”的区别
Submit是专门用于提交表单的Button，与Button的区别主要有两点： ...Submit对象只有在自己被单击后的提交中才会作为键值对被提交。 但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：
利用xrdp和mstsc远程ubuntu
2. 启动客户端并输入远程系统的 IP 地址，然后单击“连接”按钮。 3. 在要求您验证远程系统身份的弹出窗口中，忽略证书错误，然后单击“下一步”按钮继续进行连接。 4. 在 Xrdp 登录页面上，提供您的登录凭据，然后...
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结构体与对象编程：构建面向对象的应用程序，提升代码可维护性和可扩展性
# 1. MATLAB结构体基础**
MATLAB结构体是一种数据结构，用于存储和组织相关数据。它由一系列域组成，每个域都有一个名称和一个值。结构体提供了对数据的灵活访问和管理，使其成为组织和处理复杂数据集的理想选择。
MATLAB中创建结构体非常简单，使用struct函数即可。例如：
```matlab
myStruct
详细描述一下STM32F103C8T6怎么与DHT11连接
STM32F103C8T6可以通过单总线协议与DHT11连接。连接步骤如下：
1. 将DHT11的VCC引脚连接到STM32F103C8T6的5V电源引脚；
2. 将DHT11的GND引脚连接到STM32F103C8T6的GND引脚；
3. 将DHT11的DATA引脚连接到STM32F103C8T6的GPIO引脚，可以选择任一GPIO引脚，需要在程序中配置；
4. 在程序中初始化GPIO引脚，将其设为输出模式，并输出高电平，持续至少18ms，以激活DHT11；
5. 将GPIO引脚设为输入模式，等待DHT11响应，DHT11会先输出一个80us的低电平，然后输出一个80us的高电平，
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。