实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:15px;}
<style type="text/css">
body{
font-size:11px;
}
input[type="text"]{
border:1px solid #000;
width:30px;
}
#chart{
width:800px;
}
#footer
{
text-align:right;
width:800px;
}
.p1{
float:left;
}
</style>
<script type="text/javascript">
function xiaoji()
{
var zjg=0.0;var zjf=0.0;
var tb = document.getElementById("chart");
var trs= tb.rows;
for(var i=1;i<trs.length;i )
{
var ces= trs[i].cells;
var price= ces[3].innerHTML;
var Num= ces[4].getElementsByTagName("Input")[0].value;
var tPrice=parseFloat(price)*parseFloat(Num);
zjg=zjg tPrice;
ces[5].innerHTML=tPrice;
var jf= ces[2].innerHTML;
zjf=zjf parseInt(jf)*parseInt(Num);
}
document.getElementById("lblZJG").innerHTML=zjg;
document.getElementById("lblZJF").innerHTML=zjf;
}
function selAll(obj)
{
var chs= document.getElementsByName("ch1");
for(var i=0;i<chs.length;i )
{
chs[i].checked=obj.checked;
}
}
////flag==1加法， flag==0减法
function Cal(trId,flag)
{
var tr=document.getElementById(trId);
var ces=tr.cells;
var objinput=ces[4].getElementsByTagName("Input")[0];
var num = objinput.value;
if(flag==1)
{
num=parseInt(num) 1;
}
else{
if(num>1)
{
num=parseInt(num)-1;
}
}
objinput.value=num;
xiaoji();
}
function del(trId)
{
var tr = document.getElementById(trId);
var index=tr.rowIndex;
document.getElementById("chart").deleteRow(index);
xiaoji();
}
function delAll()
{
var chs = document.getElementsByName("ch1");
for(var i=chs.length-1;i>=0;i--)
{
if(chs[i].checked)
{
var trId = chs[i].value;
del(trId);
}
}
}
</script>
</head>
<body onload="xiaoji()">
<table id="chart">
<tr>
<th> <input type="checkbox" onclick="selAll(this)" />全选</th>
<th>商品信息</th>
<th> 积分</th>
<th>单价</th>
<th>数量 </th>
<th>小计</th>
<th>操作</th>
</tr>
<tr id="tr1">
<td><input type="checkbox" name="ch1" value="tr1" /></td>
<td><img src="images/taobao_cart_01.jpg" />
<a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br/>
颜色：棕色 尺码：37<br/>
保障：<img src="images/taobao_icon_01.jpg" />
</td>
<td>5</td>
<td>138.00</td>
<td>
<img src="images/taobao_minus.jpg" onclick="Cal('tr1',0)" />
<input type="text" value="2" />
<img src="images/taobao_adding.jpg" onclick="Cal('tr1',1)" />
</td>
<td></td>
<td><a href="#" onclick="del('tr1')">删除</a></td>
</tr>
<tr id="tr2">
<td><input type="checkbox" name="ch1" value="tr2" /></td>
<td><img src="images/taobao_cart_02.jpg"/>
<p>
<a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br/>
颜色：棕色 尺码：37<br/>
保障：<img src="images/taobao_icon_01.jpg" /><img src="images/taobao_icon_02.jpg" />
</p></td>
<td>12</td>
<td>265</td>
<td>
<img src="images/taobao_minus.jpg" onclick="Cal('tr2',0)" />
<input type="text" value="1" />
<img src="images/taobao_adding.jpg" onclick="Cal('tr2',1)" />
</td>
<td></td>
<td><a href="#" onclick="del('tr2')">删除</a></td>
</tr>
<tr id="tr3">
<td><input type="checkbox" name="ch1" value="tr3" /></td>
<td><img src="images/taobao_cart_03.jpg"/>
<p>
<a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）<br/>
颜色：棕色 尺码：37<br/>
保障：<img src="images/taobao_icon_01.jpg" /><img src="images/taobao_icon_02.jpg" />
</p></td>
<td>12</td>
<td>265</td>
<td>
<img src="images/taobao_minus.jpg" onclick="Cal('tr3',0)" />
<input type="text" value="1" />
<img src="images/taobao_adding.jpg" onclick="Cal('tr3',1)" />
</td>
<td></td>
<td><a href="#" onclick="del('tr3')">删除</a></td>
</tr>
<tr id="tr4">
<td><input type="checkbox" name="ch1" value="tr4" /></td>
<td><img src="images/taobao_cart_04.jpg"/>
<p>
<a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉<br/>
保障：<img src="images/taobao_icon_01.jpg" /><img src="images/taobao_icon_02.jpg" />
</p></td>
<td>12</td>
<td>12</td>
<td>
<img src="images/taobao_minus.jpg" onclick="Cal('tr4',0)" />
<input type="text" value="1" />
<img src="images/taobao_adding.jpg" onclick="Cal('tr4',1)" />
</td>
<td></td>
<td><a href="#" onclick="del('tr4')">删除</a></td>
</tr>
</table>
<div id="footer" >
<p class="p1"><input type="button" value="删除所选" onclick="delAll()"/></p>
商品总价：<label id="lblZJG"></label><br/>
可获积分：<label id="lblZJF"></label><br/>
<img src="images/taobao_subtn.jpg" />
</div>
</body>
</html>
标签： shoping
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论