一.购物车首页布局
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>我的购物车</h2>
<a href = "index.jsp">返回首页</a>
<hr/>
<table border ="1" width = "70%">
<tr>
<th><input type="checkbox" οnclick="myAll()" id="allCheckBox">全选</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>图片</th>
<th>数量</th>
<th>总价格</th>
<th>操作</th>
</tr>
<%
//获取购物车
//Cart cart = (Cart)session.getAttribute("cart");
List<Cart> listCarts = (List<Cart>)session.getAttribute("listCarts");
//定义一个页码
int pageIndex = 1;
//定义一个变量存储每页显示的条数
int pageSize = 4;
//当用户点击了下一页 获取到下一页超链接上的参数
String pIndex= request.getParameter("pageIndex");
if(pIndex!=null){
pageIndex = Integer.valueOf(pIndex);
}
//定义一个变量存储总记录数
int pageCount = listCarts.size();
System.out.println("总记录数: "+pageCount);
//pageIndex = 1 0-3 0 1 2 3
//pageIndex = 2 4-7 4 5 6 7
int start = (pageIndex-1)*pageSize;
//sublist 参数end 没有等于
int end = pageIndex*pageSize;
if(end > pageCount){
end = pageCount;
}
int pageMax = pageCount/pageSize;
if(pageCount%pageSize!=0){
pageMax++;
}
//调用伪分页的方法 subList(start,end);
listCarts = listCarts.subList(start,end);
for(Cart cart : listCarts){
%>
<tr id = "<%=cart.getGoods().getGid()%>">
<td><input type="checkbox" name="cartCheckBox" οnclick="selectSingle()"></td>
<td><%=cart.getGoods().getGid() %></td>
<td><%=cart.getGoods().getGname() %></td>
<td><%=cart.getGoods().getGprice() %></td>
<td><img src = "<%=cart.getGoods().getGpath() %>"/></td>
<td>
<button οnclick="add('a',<%=cart.getGoods().getGid()%>)">-</button>
<input readonly="readonly" type = "text" style ="width:40px" value = "<%=cart.getCcount() %>"/>
<button οnclick="add('b',<%=cart.getGoods().getGid()%>)">+</button>
</td>
<td><%=cart.getCtotal() %></td>
<td>
<button οnclick="delCart(<%=cart.getGoods().getGid()%>)">删除</button>
<button οnclick="updateCart(<%=cart.getGoods().getGid()%>)">修改</button>
</td>
</tr>
<%
}
%>
</table>
<!-- 购物车页面实现分页 -->
<!-- 每一页现实的商品条数4条 -->
<p>
[<%=pageIndex %>/<%=pageMax %>]
<a href = "Cart.jsp?pageIndex=1">首页</a>
<a href = "Cart.jsp?pageIndex=<%=pageIndex-1<=0?1:pageIndex-1%>">上一页</a>
<a href = "Cart.jsp?pageIndex=<%=pageIndex+1>pageMax?pageMax:pageIndex+1%>">下一页</a>
<a href="Cart.jsp?pageIndex=<%=pageMax%>">尾页</a>
</p>
<script type="text/javascript">
function $(sid){
return document.getElementById(sid);
}
function delCart(id){
if(window.confirm("您确定要删除吗?")){
location.href="doDel.jsp?gid="+id;
}
}
function add(type,id){
//根据参数id获取tr标签
var tr = document.getElementById(id);
//console.log(tr)
//根据tr获取数量
var ccount = tr.cells[4].children[1].value;
console.log(ccount);
if(type === 'a'){//减法
ccount--;
}else if(type==='b'){//加法
ccount++;
}
tr.cells[4].children[1].value = ccount;
}
function updateCart(id){
//根据id获取到数量
var tr = document.getElementById(id);
var ccount = tr.cells[4].children[1].value;
//console.log(ccount);
location.href="doUpdate.jsp?gid="+id+"&ccount="+ccount;
}
function myAll(){
var cs = document.getElementsByName("cartCheckBox");
var qx = $("allCheckBox");
for(var i=0;i<cs.length;i++){
cs[i].checked = qx.checked;
}
}
//控制单个选中
function selectSingle(){
var cs = document.getElementsByName("cartCheckBox");
var qx = $("allCheckBox");
var f = true;//假设选中
for(var i=0;i<cs.length;i++){
if(cs[i].checked==false){//如果有一个没选中 全选框就不选中
f = false;
break;
}
}
qx.checked = f;
}
</script>
</body>
</html>
javaweb13
最新推荐文章于 2024-09-14 18:46:05 发布
这是一个关于购物车页面的HTML代码实现,包括全选功能、商品列表展示、分页操作以及商品数量的增减和删除、更新操作。通过JavaScript实现了全选和单选的联动效果,同时提供了商品的添加、删除和更新接口。页面使用了session来存储购物车信息,并展示了分页链接。
摘要由CSDN通过智能技术生成