jsp页面加减及小计总计

最新推荐文章于 2022-06-25 09:21:46 发布
最新推荐文章于 2022-06-25 09:21:46 发布
阅读量5.6k 收藏 11
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a89004088/article/details/78079432
版权 
//给总计赋值
	var sum = 0.0;
		$(".xj").each(function(){
 			sum = sum + parseFloat($(this).text());
 		}); 
		//给总计赋值
		$("#total").text(sum);
	});


//点击添加(dj:单价)
		function add(e,dj){
		//e：javascript对象元素
		//$(e) 将e元素转成jquery对象
		//获取代表数量的input标签（上一个兄弟节点）的值
		var c =$(e).prev().val();
		//重新给这个元素的value属性赋值（c+1）（注意需要将c转整数类型parseInt()）
		$(e).prev().val(parseInt(c)+1);
		
		//获取新数量
		//var nc =$(e).prev().val();
		var nc = parseInt(c)+1;
		//获取单价
		var pc = parseFloat(dj);
		//获取小计的值(text())：通过当前节点的父节点(parent())，父节点的下一个兄弟(next()) 节点
		//改变小计的值
		 $(e).parent().next().text(nc*pc);
		//获取总计标签元素的内容
		//先获取每一个小计并且转换成小数并且遍历就和
		//parseFloat(dj);
		var sum = 0.0;
		$(".xj").each(function(){
 			sum = sum + parseFloat($(this).text());
 		}); 
		//给总计赋值
		$("#total").text(sum);
		
		}

添加一个加一个减的按钮




全部的

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% 
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<link rel="stylesheet" type="text/css" href="<%=path %>/view/detail/style/css/index.css" />
	<script type="text/javascript" src="<%=path %>/view/detail/style/js/jquery.js"></script>
	<script type="text/javascript">
	//页面加载的时候执行
	$(function (){
	//给总计赋值
	var sum = 0.0;
		$(".xj").each(function(){
 			sum = sum + parseFloat($(this).text());
 		}); 
		//给总计赋值
		$("#total").text(sum);
	});
	
	
		 // 删除菜品项
		function removeSorder(node) {
		//gid:当前购物车中每一行的id
			var gid = node.lang;
			$.post("<%=path%>/qiantai/del.do", { id: gid },
  				function(data){
  				alert(data);
  				if(data == 1){
  				//如果想 想获取数量
  				//alert($("#"+gid+"_input").val());
  				//通过id选择器，（拼接 的id）得到相应的标签元素
  				$("#"+gid+"_tr").remove();
  				var sum = 0.0;
		$(".xj").each(function(){
 			sum = sum + parseFloat($(this).text());
 		}); 
		//给总计赋值
		$("#total").text(sum);
  				
  				} 
  			}); 
			
			
		}
		//点击添加(dj:单价)
		function add(e,dj){
		//e：javascript对象元素
		//$(e) 将e元素转成jquery对象
		//获取代表数量的input标签（上一个兄弟节点）的值
		var c =$(e).prev().val();
		//重新给这个元素的value属性赋值（c+1）（注意需要将c转整数类型parseInt()）
		$(e).prev().val(parseInt(c)+1);
		
		//获取新数量
		//var nc =$(e).prev().val();
		var nc = parseInt(c)+1;
		//获取单价
		var pc = parseFloat(dj);
		//获取小计的值(text())：通过当前节点的父节点(parent())，父节点的下一个兄弟(next()) 节点
		//改变小计的值
		 $(e).parent().next().text(nc*pc);
		//获取总计标签元素的内容
		//先获取每一个小计并且转换成小数并且遍历就和
		//parseFloat(dj);
		var sum = 0.0;
		$(".xj").each(function(){
 			sum = sum + parseFloat($(this).text());
 		}); 
		//给总计赋值
		$("#total").text(sum);
		
		}
		function jian(e,dj){
		//e：javascript对象元素
		//$(e) 将e元素转成jquery对象
		//获取代表数量的input标签（上一个兄弟节点）的值
		var c =$(e).next().val();
		if((parseInt(c)-1)>-1){
		//重新给这个元素的value属性赋值（c+1）（注意需要将c转整数类型parseInt()）
		$(e).next().val(parseInt(c)-1);
		
		//获取新数量
		//var nc =$(e).prev().val();
		var nc = parseInt(c)-1;
		//获取单价
		var pc = parseFloat(dj);
		//获取小计的值(text())：通过当前节点的父节点(parent())，父节点的下一个兄弟(next()) 节点
		//改变小计的值
		 $(e).parent().next().text(nc*pc);}
		else{
		alert(不能小于0);
		}
		//获取总计标签元素的内容
		//先获取每一个小计并且转换成小数并且遍历就和
		//parseFloat(dj);
		var sum = 0.0;
		$(".xj").each(function(){
 			sum = sum + parseFloat($(this).text());
 		}); 
		//给总计赋值
		$("#total").text(sum);
		
		}
		
		// 修改菜品项数量
		/**function alterSorder(node) {
			var snumber = node.value;
			var gid = node.lang;
			window.location.href = "/wirelessplatform/sorder.html?method=alterSorder&gid="+gid+"&snumber="+snumber;
		}
		*/
		// 下单
		function genernateOrder() {
			window.location.href = "clientOrderList.html";
		}
	</script>

</head>

<body style="text-align: center">
	<div id="all">
		<div id="menu">
			<!-- 餐车div -->
			<div id="count">
				<table align="center" width="100%">
					<tr height="40">
				 		<td align="center" width="20%">菜名</td>
				 		<td align="center" width="20%">单价</td>
				 		<td align="center" width="20%">数量</td>
				 		<td align="center" width="20%">小计</td>
				 		<td align="center" width="20%">操作</td>
				 	</tr>
				 	<c:forEach items="${list}" var="e">
					<tr height="60" id="${e.ID}_tr" >
					 		<td align="center" width="20%">${e.FOODNAME}</td>
					 		<td align="center" width="20%">${e.PRICE}</td>
					 		<td align="center" width="20%">
					 			
					 			<!-- 数量 -->
					 			<input type="button"  style="width:10%" value="-" 
					 		οnclick="jian(this,${e.PRICE})" > 
					 			
					 			<input id="${e.ID}_input" type="text" readonly="readonly" value="${e.NUM}" 
					 			style="width:20%"  />
					 		
					 		<input type="button"   style="width:10%"  value="+" 
					 		οnclick="add(this,${e.PRICE})" >
					 		
					 		
					 		</td>
					 		<td align="center" class="xj" width="20%">${e.PRICE * e.NUM}</td>
					 		<td align="center" width="20%">
					 			<input type="button" value="删除" class="btn_next" lang="${e.ID}" οnclick="removeSorder(this)" />
					 		</td>
				 	</tr>
					</c:forEach>
					<tr>
						<td colspan="6" align="right">总计:
							¥ <span style="font-size:36px;" id="total"></span>
							<label
								id="counter" style="font-size:36px"></label>
						</td>
					</tr>
					<tr>
						<td colspan="6" style="margin-left: 100px; text-align: center;"align="right">
							<input type="hidden" name="bId" value="">
							
								
								
									<input type="button" value="下单" class="btn_next" οnclick="genernateOrder()" />
								
							
						</td>
					</tr>
				</table>
			</div>
		</div>

		<!-- 右边菜系列表，菜品搜索框  -->
		<div id="dish_class">
			<div id="dish_top">
				<ul>
				<li class="dish_num"></li>
					<li>
						<a href="clientOrderList.html">
							<img src="<%=path %>/view/detail/style/images/call2.gif" />
						</a>
					</li>
				</ul>
			</div>

			<div id="dish_2">
				<ul>
					
						<li>
							<a href="caidan.html">粤菜</a>
						</li>
					
						<li>
							<a href="chuancai.html">川菜</a>
						</li>
					
						<li>
							<a href="chuancai.html">湘菜</a>
						</li>
					
						<li>
							<a href="chuancai.html">东北菜</a>
						</li>
					
				</ul>
			</div>
			<div id="dish_3">
				<!-- 搜索菜品表单  -->
				<form action="#" method="post">
					<table width="166px">
						<tr>
							<td>
								<input type="text" id="dish_name" name="foodName" class="select_value" /> 
								<input type="hidden" value="selectFood" name="method">
							</td>
						</tr>
						<tr>
							<td><input type="submit" id="sub" value="" /></td>
						</tr>
						<tr>
							<td>
								<a href="#">
									<img src="<%=path %>/view/detail/style/images/look.gif" />
								</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
</body>
</html>



<!-- 数量 -->
					 			<input type="button"  style="width:10%" value="-" 
					 		οnclick="jian(this,${e.PRICE})" > 
					 			
					 			<input id="${e.ID}_input" type="text" readonly="readonly" value="${e.NUM}" 
					 			style="width:20%"  />
					 		
					 		<input type="button"   style="width:10%"  value="+" 
					 		οnclick="add(this,${e.PRICE})" >

a89004088
关注
在JSP中使用servlet类计算账单
GGG166的博客
05-04 688
在JSP中使用select类计算账单 作者：GGG166 首先在JSP页面输入账单信息，用表单来提交信息给computeBill类，代码如下： <%-- 作者：GGG166 --%> <%@page contentType="text/html;charset=gb2312" %> <html> <body bgcolor="Thistl...
原生js做购物车全选选中商品显示价格和小计的计算
自学前端开发
06-07 2318
html代码 <div class="contain"> <table class="table table-bordered"> <thead > <tr> <th style="width:100px;"><label><input type="checkbox"id="selectAll" /> 全选</label></th>
jsp计算合计值
weixin_43280061的博客
03-21 600
jsp计算合计值 input框显示 <input type="text" onfocus=this.blur() class="upperInput" id="hjz" name="hjz" value="" placeholder="" style="width: 120px;text-align:center;"> 改变值触发事件upperCase(x) <inp...
JSP——通过表单向自己提交一份通信费账单，然后计算出消费总额（分隔标记split的使用案例正则表达式数字序列及非数字序列的区别）
lmm0513的博客
04-13 1010
String类的String[]split(String regex)方法，该方法可以用参数regex指定的正则表达式作为分隔标记分解成当前字符串中的语言符号，例如可以使用正则表达式“[0123456789].+”匹配所有的数字序列，用“[^0123456789].+”匹配所有的非数字序列 1.index.jsp文件 <%@pagecontentType="text/html;cha...
（jsp+servlet+mvc）jsp页面如何统计数据库表的不同count并显示（简易的echart）
qq_44807346的博客
06-08 1601
从数据库中count不同的数据给servlet传到jsp页面上 最近在做一个java+servlet+mvc的一个项目，为了在jsp页面上显示数据库当中的统计的数据，我做了以下的方法 获取数据库. // 获取数据库，保存到javabean中 public ArrayList<count> countN() throws Exception { //统计用户 ArrayList<count> al = new ArrayList<count>(); //
js 下拉框 加减乘除
abnc8791的博客
08-17 675
<!doctype html> <html> <head> <meta charset="utf-8"> <title>事件</title> <script> function count(){ var num1 = parseInt(document.getEleme...
根据MySQL与jsp生成一个购物车代码要求可以当页加减商品数量，计算商品小计与总价，可以删除清空购物车和清除商品
05-30
好的，下面是一个可以实现当页加减商品数量、计算商品小计与总价、删除、清空购物车和清除商品的购物车代码示例： 1. 商品表与用户表同上，购物车表需新增字段：`subtotal`（小计）。 2. JSP页面代码： ``` *" %>...
JavaWeb项目(登录注册页面)全过程详细总结
a10534126的博客
03-03 4166
JavaWeb项目(登录注册页面)全过程总结 文章目录 JavaWeb项目(登录注册页面)全过程总结 一、环境准备与开发工具 二、创建 JavaWeb 项目 2.1 新建Dynamic Web Project项目 2.2 创建前端页面 2.2.1 登录页面 1.login.jsp 2. login.js 3. time.js 4. focus.js + animate.js 2.2.2 注册页面（register.jsp） 2.2.3 修改密码的页面（change_pwd.jsp） 2.2
js - 简单的购物车增减操作
DebraJohn
07-31 519
来做一个简陋的购物车吧。 简陋的购物车 功能呢，就是可以通过加减按钮来操作数量，同时商品的合计和下面的总计都会动态地发生变化，实现一个增减和计算的例子。 首先我们简单地写一下html： &lt;body&gt; &lt;ul id="shopLi"&gt;&lt;/ul&gt; &lt;!-- 用来存放渲染出来的购物车列表 --&gt...
基于jsp的电子商城
最新发布
09-26
购物车中的商品可以通过点击“删除”按钮进行删除，也可以通过加减按钮进行数量调整。如果商品数量大于库存，则会提示库存不足。购物车中的商品价格和总计会随着商品数量的变化而改变。游客在购物车中点击“结算”后...
jsp页面加减乘除
weixin_33681778的博客
03-07 6711
//乘法 function numMulti(num1, num2) { var baseNum = 0; try { baseNum += num1.toString().split(".")[1].length; } catch (e) { } try{ baseNum += num2.toString().split(".")[1].length; }...
购物车 如何实现数量增加，小计，合计，总数JSP中页面的变化
热门推荐
张不帅
09-17 1万+
样式的调节： &lt;style&gt; div.cartDiv { max-width: 1013px; margin: 10px auto; color: black; } table.cartProductTable { width: 100%; font-size: 12px; } tr.cartProductItemTR { border: 1px solid #CC...
html5用函数输出nn乘法表,4：用JSP在表格中输出99乘法表和Book类
weixin_42406647的博客
06-26 390
相关知识点：1. 需要导包的地方通过以下方式导入2. 可以使用以下方式创建指定的元素out.print("标签");3. 使用表达式输出内容4.使用小脚本编写Java语句pageEncoding="utf-8"%>htmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loos...
实现动态下拉框
weixin_30532987的博客
12-05 728
在开发项目中，经常会遇到大小类的问题，即有两个下拉框,一个为主,一个为次,如果主下拉框选择更新后根据所选择的项从数据库中读取相关数据并更新到次下拉框中.比如主下拉框为大类,次下拉框为大类下的选项,并且页面是没有提交的。思路是在打开页面时就要所有的大类和小类都从数据库中取出，把所有的小类组装成一个javascript小类数组(数组结构为 Array("大类编号","小类编号","小类名称"))，当大...
JSP内置对象
qq_42242452的博客
09-27 922
实验一：利用request对象获取表单提交信息 制作一个用户信息提交页面，如下所示： 注意内容： 要解决其中的多项选择“爱好”这一项的信息获取，需要采用到数组，使用方法如下： String 数组1[]=request.getParameterValues(“输入框名”); 提交的信息便存储进入数组1中，输出时候使用循环即可。 用户填写完成后完成，提交到另一个页面，将用户信息显示出来，如下示： 效果图： 要求： 1．页面提交的用户姓名为中文，不能出现乱码 2．表单中的多项选择内容要求正确显示 代码部分：
jsp实现简易计算器
qq_52108058的博客
06-25 8281
输入两个数实现加减乘除，结果输出到页面上 简易的jsp代码，有两个输入框，四个提交按钮 1、addalltwo.jsp 嵌套在jsp中的java代码，接收两个输入值，通过判断运算符进行相应运算，注意除数不为零的情况 通过输出嵌套在jsp中的java值......
用JSP实现简单的四则运算
GGG166的博客
04-24 1万+
用JSP实现简单的四则运算 作者：GGG166 首先定义一个Java的CompuerBean类放在beans包中用来计算两个数的四则运算，代码如下： /* 作者：GGG166 */ package beans; public class CompuerBean { double num1; double num2; public void setNum1(doub...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值