while (rs.next()) { application.setAttribute("id", rs.getString("spid")); application.setAttribute("goods_name", rs.getString("itemname")); application.setAttribute("goodspic", rs.getString("price")); //application.setAttribute("blob", rs.getString("blob")); %> <tr> <td width = "100px" height = "42px"> <input name="one" type="checkbox" onclick="myOne()"/> </label> </td> <td width = "135px" height = "42px"><%=application.getAttribute("id") %></td> <td width = "150px" height = "42px"><%=application.getAttribute("goods_name")%></td> <td width = "150px" height = "42px" id="price"> <img src="yuan.jpg" width="20" heigth="20"> <%=application.getAttribute("goodspic")%> </td> <td width = "240px" height = "42px" id="car"> <input type="button" class="decrease" value="-"> <input type="text" class="quantity" value="1"/> <input type="button" class="increase" value="+"> </td> <td width = "135px" height = "42px"> <input type="button" class="deldet" value="删除此商品"> </td> </tr> <% } %>根据以上代码获取点击后的数量编写购物车价格总计并当页显示
时间: 2023-07-21 19:12:55 浏览: 78
.NET访问配置文件app.config的功能详解
可以在 HTML 代码中为数量输入框和加减按钮添加 `class` 属性,以便在 JavaScript 中获取它们的值和监听它们的点击事件。然后,在 JavaScript 中遍历所有商品的数量输入框,计算出购物车中所有商品的数量总和和价格总和,最后将结果显示在页面上。
以下是示例代码:
```
<%
double total = 0;
ResultSet rs = ... // 数据库查询代码
while (rs.next()) {
// ... 数据库查询结果处理代码
double price = Double.parseDouble((String)application.getAttribute("goodspic"));
total += price;
// ... HTML代码
}
%>
<tr>
<td colspan="3"></td>
<td>总计:</td>
<td colspan="2" id="total"><%= total %></td>
</tr>
<script>
// 获取所有数量输入框和加减按钮
var quantityInputs = document.querySelectorAll(".quantity");
var decreaseButtons = document.querySelectorAll(".decrease");
var increaseButtons = document.querySelectorAll(".increase");
// 遍历所有数量输入框和加减按钮,添加事件监听器
for (var i = 0; i < quantityInputs.length; i++) {
var quantityInput = quantityInputs[i];
var decreaseButton = decreaseButtons[i];
var increaseButton = increaseButtons[i];
decreaseButton.addEventListener("click", function() {
var quantity = parseInt(quantityInput.value);
if (quantity > 1) {
quantityInput.value = quantity - 1;
updateTotal();
}
});
increaseButton.addEventListener("click", function() {
var quantity = parseInt(quantityInput.value);
quantityInput.value = quantity + 1;
updateTotal();
});
quantityInput.addEventListener("input", function() {
updateTotal();
});
}
// 计算购物车总价
function updateTotal() {
var total = 0;
for (var i = 0; i < quantityInputs.length; i++) {
var quantityInput = quantityInputs[i];
var price = parseFloat(quantityInput.parentNode.previousElementSibling.innerHTML);
var quantity = parseInt(quantityInput.value);
total += price * quantity;
}
document.getElementById("total").innerHTML = total.toFixed(2);
}
</script>
```
其中,`querySelectorAll()` 方法用来获取指定的元素集合,`addEventListener()` 方法用来添加事件监听器,`parseInt()` 和 `parseFloat()` 方法用来将字符串转换为整数和浮点数,`toFixed()` 方法用来将浮点数格式化为指定小数位数的字符串。在 `updateTotal()` 函数中,使用 `toFixed()` 方法将总价格式化为两位小数。
阅读全文