<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝购物车页面</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul, li, ol, h1, dl, dd {
list-style:none;
margin:0px;
padding:0px;
}
a {
color:#1965b3;
text-decoration: none;
}
a:hover {
color:#CD590C;
text-decoration:underline;
}
img {
border:0px;
vertical-align:middle;
}
#header {
height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#nav {
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#navlist {
width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li {
float:left;
height:23px;
line-height:26px;
}
.navlist_red_left {
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
.navlist_red {
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
.navlist_red_arrow {
background-color:#ff6600;
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray {
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
.navlist_gray_arrow {
background-color:#e4e4e4;
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray_right {
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -138px;
width:3px;
}
#content {
width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1 {
text-align:center;
width:50px;
}
.title_2 {
text-align:center;
}
.title_3 {
text-align:center;
width:80px;
}
.title_4 {
text-align:center;
width:80px;
}
.title_5 {
text-align:center;
width:100px;
}
.title_6 {
text-align:center;
width:80px;
}
.title_7 {
text-align:center;
width:60px;
}
.line {
background-color:#a7cbff;
height:3px;
}
.shopInfo {
padding-left:10px;
height:35px;
vertical-align:bottom;
}
.num_input {
border:solid 1px #666;
width:25px;
height:15px;
text-align:center;
}
.cart_td_1, .cart_td_2, .cart_td_3, .cart_td_4, .cart_td_5, .cart_td_6, .cart_td_7, .cart_td_8 {
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
.cart_td_1, .cart_td_3, .cart_td_4, .cart_td_5, .cart_td_6, .cart_td_7 {
border-right:solid 1px #FFF;
}
.cart_td_3 {
text-align:left;
}
.cart_td_4 {
font-weight:bold;
}
.cart_td_7 {
font-weight:bold;
color:#fe6400;
font-size:14px;
}
.hand {
cursor:pointer;
}
.shopend {
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow {
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}
</style>
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="cartId">
<form action="" method="post" name="myform">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value="" onClick="checkAll(this.checked)" />
全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product1">
<td class="cart_td_1"><input name="cartCheckVal" type="checkbox" value="product1"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="cartId"/></td>
<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
颜色：棕色 尺码：37<br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onClick="changeNum('num_1','cut')" class="hand"/>
<input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onClick="changeNum('num_1','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:delRow('product1')">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product2">
<td class="cart_td_1"><input name="cartCheckVal" type="checkbox" value="product2" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="cartId"/></td>
<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onClick="changeNum('num_2','cut')" class="hand"/>
<input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onClick="changeNum('num_2','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:delRow('product2')">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product3">
<td class="cart_td_1"><input name="cartCheckVal" type="checkbox" value="product3" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="cartId"/></td>
<td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onClick="changeNum('num_3','cut')" class="hand"/>
<input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onClick="changeNum('num_3','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:delRow('product3')">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product4">
<td class="cart_td_1"><input name="cartCheckVal" type="checkbox" value="product4" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="cartId"/></td>
<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onClick="changeNum('num_4','cut')" class="hand"/>
<input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onClick="changeNum('num_4','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:delRow('product4')">删除</a></td>
</tr>
<tr>
<td colspan="3"><a href="javascript:delSelectRow()"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
<td colspan="5" class="shopend">商品总价（不含运费）：
<label id="total" class="yellow"></label>
元<br />
可获积分
<label class="yellow" id="integral"></label>
点<br />
<input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
</tr>
</form>
</table>
</div>
<script type="text/javascript">
/*
改变购物车的数量
*/
function changeNum(number,cutOrAdd){
var num = document.getElementById(number);
if("cut"==cutOrAdd){
if(num.value > 1){
num.value = parseInt(num.value)-1;
}else{
alert("不能为零");
return false;
}
}else{
num.value = parseInt(num.value)+1;
}
calcSum();
}
/*
全选与非全选的效果
*/
function checkAll(val){
var arr = document.getElementsByName("cartCheckVal");
for(var i=0;i<arr.length;i++){
arr[i].checked = val;
}
}
/*
删除单行
*/
function delRow(row){
var index = document.getElementById(row).rowIndex;
document.getElementById("cartId").deleteRow(index);
document.getElementById("cartId").deleteRow(index-1);
calcSum();
}
/*
删除选中行
*/
function delSelectRow(){
var arr = document.getElementsByName("cartCheckVal");
var count=0;
//倒过来删除
for(var i=arr.length-1; i>=0; i--){
var index = document.getElementById(arr[i].value).rowIndex;
if(arr[i].checked == true){
document.getElementById("cartId").deleteRow(index);
document.getElementById("cartId").deleteRow(index-1);
count++;
}
}
if(count==0){
alert("没有选中行，无法删除");
}else{
alert("删除成功");
}
calcSum();
}
//加载
window.onload = calcSum;
/*
计算总和
*/
function calcSum(){
//积分 价格 数量 总积分 总价格
var score=0, money=0,number=0,totalScore = 0,totalMoney = 0;
var tabTr = document.getElementById("cartId").getElementsByTagName("tr");
//循环计算
for(var i=1; i<tabTr.length; i++){
if(tabTr[i].getElementsByTagName("td").length > 2){
score = tabTr[i].getElementsByTagName("td")[3].innerHTML;
money = tabTr[i].getElementsByTagName("td")[4].innerHTML;
number = tabTr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;
tabTr[i].getElementsByTagName("td")[6].innerHTML = money * number;
totalScore += score * number;
totalMoney += money * number;
}
//获得结果
document.getElementById("total").innerHTML = totalMoney;
document.getElementById("integral").innerHTML = totalScore;
}
}
</script>
</body>
</html>
效果图：
相关推荐
DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成DOS高手速成...
虚拟内存机制使得程序可以超过物理内存的限制，通过页面替换算法实现。 3. **文件系统**：文件系统负责组织和管理磁盘上的数据，包括文件的创建、删除、读写以及目录结构的管理。常见的文件系统有FAT、NTFS、EXT...
计算机网络期末速成课，包含速成课视频+期末试题以及答案，适用于各类教材，3小时搞定期末。
《DOS速成 DOS高手速成》是一本旨在帮助用户快速掌握DOS操作系统的书籍，适合初学者和希望提升DOS技能的用户。DOS，全称Disk Operating System，是早期个人计算机上广泛使用的命令行操作系统，对于理解计算机底层...
《速成与仓颉输入法：提升汉字输入效率的秘密武器》 在信息技术日新月异的今天，输入法作为人机交互的重要工具，其效率直接影响到我们的工作效率和生活质量。尤其对于繁体字使用者来说，选择合适的输入法至关重要。...
本资源为“计算机组成原理期末速成课”，旨在帮助学生在短时间内高效复习，应对期末考试。速成课程结合了视频讲解和多套期末试题，试题附带答案，覆盖了各类计算机组成原理教材的主要知识点。 1. **基本概念** - *...
《VB速成》 Visual Basic（简称VB）是Microsoft公司推出的一种面向对象的、可视化集成开发环境（IDE），主要用于编写Windows应用程序。VB以其易学易用的特点，深受初学者和专业开发者的喜爱。"VB速成"的学习目标是...
《电子工程师自学速成 设计篇》是一本专为电子工程师设计的自学教程，共534页，包含了丰富的理论知识和实践经验。该书以58.3M的超大容量，提供了高清书签版，方便读者查阅和学习。这份资料的标签明确地指出其核心...
清末国内的速成教育涉及师范、法政、军事以及学堂、外文、卫生、工艺、农桑、铁路、警务、监狱等多个方面。速成教育之所以得以开展,根本原因一是毕业于正规院校的师资缺口巨大,二是舆论导向也起了助推作用。速成师范...
软件工程师日语速成（精读）.part01.rar
例如，`<%@ page ... %>`用来指定页面的编码、导入Java包或定义页面变量。 ### 3. JSP内置对象 JSP提供了9个内置对象，如`request`, `response`, `session`, `application`等，它们是预定义的，可以直接在JSP页面中...
**JSP（Java Server Pages）** 是一种动态网页技术，由Sun Microsystems开发，现在由Oracle公司维护。...在实际学习过程中，参考“JSP速成教程”这样的资料，能够快速掌握JSP的核心技术和实践技巧。
**JSP（Java Server Pages）** 是一种...总的来说，JSP速成教程将带领你从零开始，逐步了解和掌握这个强大的网页开发技术，助你快速构建动态网站。通过实践和不断学习，你将能够熟练运用JSP进行各种Web应用程序的开发。
通过学习这个JSP速成教程，你可以理解JSP的基本原理，掌握如何编写简单的JSP页面，以及如何在实际项目中应用JSP技术。文件名中的`.pdg`可能表示PDF文档的部分页面，用于进一步深入学习JSP的相关内容。结合这些资料，...
PLSQL Developer 工具的使用图解速成 PLSQL Developer 是一个为 Oracle 数据库开发存储程序单元的集成开发环境，使用 PLSQL Developer 可以方便地创建客户/服务器应用程序的服务器部分。在本次项目中，我们将详细...
二维码速成
这个“ASP.NET一夜速成视频教程”旨在帮助初学者快速掌握ASP.NET的核心概念和技术，从而能够在短时间内建立起开发Web应用的基础。 ASP.NET的关键特性包括： 1. **页面生命周期管理**：ASP.NET页面有自己的生命周期...
电子工程师必备-关键技能速成宝典
oracle速成教程，oracle的基本使用，恢复与备份，监控和参数调优
这个"速成版"可能是为了方便初学者快速上手，提供了简化或精简的版本，减少了学习曲线。下面我们将详细探讨VC++2008的一些关键知识点。 1. **C++编程语言**: C++是一种强大的、面向对象的编程语言，它继承了C语言的...