因为大作业需要设置购物车，并能从用户所在数据库表中导出，所以找到了一个购物车模版，运行之后状态如下：
**
index.html：
**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div id="box">
<div id="content_box">
<div class="imfor_top"><!--头行-->
<div class="check_top">
<input type="checkbox" id="all" />全选
</div>
<div class="pudc_top">商品</div>
<div class="pices_top">单价</div>
<div class="num_top">数量</div>
<div class="totle_top">小计</div>
<div class="del_top">操作</div>
</div>
<div class="imfor"><!--每一行，在导入数据库后可将此模块循环输出，下面有介绍-->
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/1.jpg" />Casio/卡西欧 EX-TR350</span>
</div>
<div class="pices">5999.8</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">5999.8</div>
<div class="del">删除</div>
</div>
<div class="imfor"><!--每一行-->
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/2.jpg" /><span>Canon/佳能 PowerShot SX50 HS</span></div>
<div class="pices"> 3888.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">3888.5</div>
<div class="del">删除</div>
</div>
<div class="imfor"><!--每一行-->
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/3.jpg" /><span>Sony/索尼 DSC-WX300</span></div>
<div class="pices">1428.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">1428.5</div>
<div class="del">删除</div>
</div>
<div class="imfor"><!--每一行-->
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/4.jpg" /><span>Fujifilm/富士 instax mini 25</span></div>
<div class="pices">640.6</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">640.6</div>
<div class="del">删除</div>
</div>
</div>
<div class="foot"><!--最后-->
<div class="foot_add">添加一行</div>
<div class="foot_del">全部删除</div>
<div class="foot_cash">结算</div>
<div class="foot_tol"><span>合计：￥</span><span id="susum">0</span></div>
</div>
</div>
</body>
</html>**
style.css
**
* {
font-size: 14px;
font-family: "微软雅黑";
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
width: 160px;
height: 120px;
}
/*span{display: inline-block;}*/
.imfor_top div {
height: 40px;
background-color: deepskyblue;
font-weight: bold;
}
.imfor div {
height: 140px;
line-height: 120px;
}
.imfor:hover {
background: RGB(238, 246, 255);
}
.check,
.check_top {
width: 70px;
}
.pudc,
.pudc_top {
width: 400px;
}
.pices,
.pices_top {
width: 60px;
}
.totle {
color: red;
}
.num,
.num_top {
width: 90px;
}
.num input {
width: 40px;
}
.num span {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
cursor: pointer;
}
.totle,
.totle_top {
width: 60px;
}
.del,
.del_top {
width: 60px;
cursor: pointer;
}
.imfor_top div,
.imfor div {
float: left;
border: 1px solid deepskyblue;
text-align: center;
}
.imfor_top,
.imfor {
width: 800px;
}
.foot {
float: inherit;
}
#box,
#content_box {
width: 800px;
margin: 0 auto;
}
.foot_add,
.foot_del {
float: left;
cursor: pointer;
margin-left: 10px;
margin-top: 14px;
}
.foot {
width: 800px;
background-color: #eaeaea;
}
.foot_tol,
.foot_cash {
float: right;
cursor: pointer;
width: 80px;
margin-top: 14px;
margin-left: 100px;
}
#susum {
color: red;
}js.js:
$(function() {
totl();
adddel()
//全选
$("#all").click(function() {
all = $(this).prop("checked")
$(".Each").each(function() {
$(this).prop("checked", all);
})
})
//删除当前行
$(".del").each(function() {
$(this).click(function() {
$(this).parent().remove();
if($(".imfor").length == 0) {
$("#susum").text(0);
}
totl();
})
})
//添加一行
$(".foot_add").click(function() {
var str = '<div class="imfor">' +
'<div class="check">' +
'<input type="checkbox" class="Each" />' +
'</div>' +
'<div class="pudc"><img src="img/5.jpg" /><span>Fujifilm/富士 instax mini 25</span></div>' +
'<div class="pices">640.6</div>' +
'<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>' +
'<div class="totle">640.6</div>' +
'<div class="del">删除</div>' +
'</div>';
$(this).parent().prev().append(str);
totl();
adddel()
$(".del").each(function() {
$(this).click(function() {
$(this).parent().remove();
totl();
})
})
})
//全选删除
$(".foot_del").click(function() {
$(".Each").each(function() {
if($(this).prop('checked')) {
$(this).parents(".imfor").remove();
totl();
if($(".imfor").length == 0) {
$("#susum").text(0);
}
}
})
})
})
//合计
function totl() {
var sum = 0;
$(".totle").each(function() {
sum += parseFloat($(this).text());
$("#susum").text(sum);
})
}
function adddel(){
//小计和加减
//加
$(".add").each(function() {
$(this).click(function() {
var $multi = 0;
var vall = $(this).prev().val();
vall++;
$(this).prev().val(vall);
$multi = parseFloat(vall) * parseFloat($(this).parent().prev().text());
$(this).parent().next().text(Math.round($multi));
totl();
})
})
//减
$(".reduc").each(function() {
$(this).click(function() {
var $multi1 = 0;
var vall1 = $(this).next().val();
vall1--;
if(vall1 <= 0) {
vall1 = 1;
}
$(this).next().val(vall1);
$multi1 = parseFloat(vall1) * parseFloat($(this).parent().prev().text());
$(this).parent().next().text(Math.round($multi1));
totl();
})
})
}上面三个是未调用数据库时的模版，需要运用jquery。
<div class="imfor"><!--每一行-->
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/2.jpg" /><span>Canon/佳能 PowerShot SX50 HS</span></div>
<div class="pices"> 3888.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">3888.5</div>
<div class="del">删除</div>
</div>那么如何遍历输出上面这一段代码表现出数据库输出呢，在jsp界面连接数据库，查询数据库中的商品，如下面这段代码，将信息行插入到while遍历中：
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.9.1.min的副本.js" ></script>
<script type="text/javascript" src="js.js"></script>
<title></title>
</head>
<body>
<% String no = request.getParameter("flag");//从上一jsp获取的用户no，用来判断用户信息，以及取值
String DRIVER_NAME = "com.mysql.jdbc.Driver";
final String URL = "jdbc:mysql://localhost:3306/ClothesM7";//url地址，
// 可以在Drive and Data Source里面查看自己的数据库的地址
final String USER_NAME = "root";//数据库用户名
//密码
final String PASSWORD = "Wzy768291";//我设置的连接数据库的密码
try {
//获取连接
Class.forName(DRIVER_NAME);
Connection conn2 = DriverManager.getConnection(URL, USER_NAME, PASSWORD);
String sql = "select * from ClothesM7.shoppingcar where uids = '"+no+"'";
//ps.setString(3,age);
Statement stmt = conn2.createStatement();//创建PreparedStatement对象
ResultSet rs = stmt.executeQuery(sql);
%>
<div id="box">
<div id="content_box">
<div class="imfor_top"><!--表首-->
<div class="check_top">
<input type="checkbox" id="all" />全选
</div>
<div class="pudc_top">商品</div>
<div class="pices_top">单价</div>
<div class="num_top">数量</div>
<div class="totle_top">小计</div>
<div class="join_time">加入购物车时间</div>
<div class="del_top">操作</div>
</div>
<%
while (rs.next()){//当查询结果存在时，获取相关信息
String cid = rs.getString(2);//获取服装id
String numb = rs.getString(3);
String date = rs.getString(4);
String sql2 = "select * from ClothesM7.clothes where cid = '"+cid+"'";//利用服装id获取更多服装信息
Statement stmt2 = conn2.createStatement();//创建PreparedStatement对象
ResultSet rs2 = stmt2.executeQuery(sql2);//获取查询结果，rs表示
while (rs2.next()){//当服装信息存在时，遍历rs2，这里我遍历了两遍因为需要输出的东西在两张表里面，简单的化一遍即可
String path = rs2.getString(8); //通过clothes表格获取服装路径
String filename = rs2.getString(7);//通过clothes表格获取服装照片文件名称
String name = rs2.getString(1);//通过clothes表格获取服装名称
String price = rs2.getString(6);//通过clothes表格获取服装价格
final float i = Float.parseFloat(price)*Float.parseFloat(numb);
String tot = "" + i;
//输出每行信息
%>
<div class="imfor"><!--每一行-->
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img height="50px" width="50px" src="<%=path+"/"+filename%>" /><%=name%><!--输出服装照片-->
</div>
<div class="pices"><%=price%></div>
<div class="num"><span class="reduc"> - </span><input type="text" value="<%=numb%>" /><span class="add"> +</span></div>
<div class="totle"><%=tot%></div>
<div class="join"><%=date%></div>
<div class="del"><a href="udeleCles.jsp?flag=<%=cid%>&flag2=<%=no%>&flag3=<%=date%>" mothed="post">删除</a></div>
</div>
<%
}
}
%>
<div class="foot"><!--表尾-->
<div class="foot_add">添加一行</div>
<div class="foot_del">全部删除</div>
<div class="foot_cash">结算</div>
<div class="foot_tol"><span>合计：￥</span><span id="susum">0</span></div>
</div>
</div>
</div>
<%
stmt.close();
conn2.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
out.print(no);
%>
</body>
</html>读取数据库结果，并输出如下：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
