<!DOCTYPE html>
<html>
<head>
<title>js购物车</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bg_tab{border-collapse:collapse;border-spacing:0;width:800px;border:1px solid #ccc;}
.bg_tab tr td{height:25px;border:1px solid #ccc;text-align:center;}
.inputtext{width:100px;height:20px;background-color:transparent;}
.inputtextonly{text-align:center;vertical-align:middle;width:100px;border:0px solid #ccc;color:#F22D00;}
</style>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
var products=[];
Array.prototype.baoremove = function(index){
if(isNaN(index)||index>this.length){
return false;
}
this.splice(index,1);
}
//添加新记录
function addProduct(id,num,price){
var product={'id':id,'num':num,'price':price};
products.push(product);
}
//根据id删除
function delProduct(id){
for (var i = 0; i <= products.length; i++) {
if (products[i].id == id) {
products.baoremove(i);
break;
}
}
}
//根据id修改数量
function modiProduct(id,dealnum){
for (var i = 0; i <= products.length; i++) {
if (products[i].id == id) {
products[i].num=dealnum;
break;
}
}
}
//所有金额
function allpay(){
var str=document.getElementsByName("box");
var allpay=0;
for (i=0;i<str.length;i++){
if(str[i].checked == true){
allpay+=parseInt(str[i].value);
}
}
$("#allpay").val(allpay);
}
//计算金额及修改时改变数组num属性值
function multiplyNum(id){
var dealnum=$("#dealnum"+id).val();
var dealprice=$("#dealprice"+id).val();
var onepay=dealnum*dealprice;
$("#onepay"+id).val(onepay);//客户看到的金额
$("#box"+id).val(onepay);//把金额赋值到box，以便计算总金额
modiProduct(id,dealnum);
allpay();
}
//判断数组记录添加删除
function addThis(id){
var dealnum=$("#dealnum"+id).val();
var dealprice=$("#dealprice"+id).val();
if($("#box"+id).attr("checked")){
addProduct(id,dealnum,dealprice);
var onepay=dealnum*dealprice;
$("#onepay"+id).val(onepay);//客户看到的金额
$("#box"+id).val(onepay);//把金额赋值到box，以便计算总金额
}else{
delProduct(id);
}
allpay();
}
//提交处理好的json数组
function memberBillAddPre(){
var ss=obj2str(products);
var jsonstr = "{'productsarry':"+ss+"}";
alert(jsonstr);
//location.href="memberBillAddPre?jsonstr="+jsonstr;
}
//json数组转字符串
function obj2str(o){
var r = [];
if(typeof o == "string" || o == null) {
return o;
}
if(typeof o == "object"){
if(!o.sort){
r[0]="{"
for(var i in o){
r[r.length]=i;
r[r.length]=":";
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="}"
}else{
r[0]="["
for(var i =0;i<o.length;i++){
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="]"
}
return r.join("");
}
return o.toString();
}
</script>
</head>
<body>
<!--内容区域-->
<div class="bgposition">
<a>工作台 >> 我的购物车</a>
</div>
<table class="bg_tab">
<tr>
<td>选择</td><td>产品名</td><td>库存</td><td>单价（不含税）</td><td>购买数量</td><td>金额</td>
</tr>
<tr>
<td>
<input onclick="addThis('1')" id="box1" type="checkbox" name="box" value="0" />
</td>
<td>键盘k40ab</td>
<td>1000</td>
<td>
<input id="dealprice1" class="inputtextonly" value="80" readonly="readonly" type="text"/>
</td>
<td>
<input id="dealnum1" class="inputtext" value="1" type="text" onkeyup="multiplyNum('1')"/>
</td>
<td>
<input id="onepay1" class="inputtextonly" value="0" readonly="readonly" type="text"/>
</td>
</tr>
<tr>
<td>
<input onclick="addThis('2')" id="box2" type="checkbox" name="box" value="0" />
</td>
<td>鼠标0a</td>
<td>500</td>
<td>
<input id="dealprice2" class="inputtextonly" value="60" readonly="readonly" type="text"/>
</td>
<td>
<input id="dealnum2" class="inputtext" value="1" type="text" onkeyup="multiplyNum('2')"/>
</td>
<td>
<input id="onepay2" class="inputtextonly" value="0" readonly="readonly" type="text"/>
</td>
</tr>
<tr>
<td>
<input onclick="addThis('3')" id="box3" type="checkbox" name="box" value="0" />
</td>
<td>主机40b</td>
<td>5000</td>
<td>
<input id="dealprice3" class="inputtextonly" value="70" readonly="readonly" type="text"/>
</td>
<td>
<input id="dealnum3" class="inputtext" value="1" type="text" onkeyup="multiplyNum('3')"/>
</td>
<td>
<input id="onepay3" class="inputtextonly" value="0" readonly="readonly" type="text"/>
</td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">
<input type="button" class="inputbutton" value="购买" onclick="memberBillAddPre()"/>
</td>
<td>
<input id="allpay" class="inputtextonly" readonly="readonly" type="text"/>
</td>
</tr>
</table>
<!--内容区域/-->
</body>
</html>
评论0
最新资源