该实例主要讲解了使用数组实现动态购物车，数据初始化，全选，动态添加等 
//页面加载时初始化(模拟)一下商品数据
window.onload=function(){
var products=[];
//{}代表一个对象，属性名：值
products[products.length]={proname:"VIVOX50",price:4999.00}
products[products.length]={proname:"huaweiP40",price:3999.00}
products[products.length]={proname:"OPPO R11",price:1999.00}
products[products.length]={proname:"redMI9",price:1999.00}
products[products.length]={proname:"Iphone",price:7999.00}
products.forEach(function(item){
var tbd=document.getElementById("product");
//动态创建tr和td
/*var td1=document.createElement("td");//创建td标签
td1.innerText=item.proname;//对象名.属性名
var td2=document.createElement("td");
td2.innerText=item.price;
var td3=document.createElement("td");
td3.innerHTML="<input type='button' value='加入购物车'/>"
var tr=document.createElement("tr");
//将td添加到tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//将tr添加到tbody中
tbd.appendChild(tr)*/
//获取模板
var template=document.getElementById("list_template");
//模板中的内容替换成具体数据，然后追加到tbody中
tbd.innerHTML =template.innerHTML.replace("list_proname",item.proname)
.replace("list_price",(item.price).toFixed(2))
})
}
//购物车添加
var cart_arr=[];//购物车数组，存档所有购物车中的商品
function add_cart(obj){//obj形参，不能系统关键字
//因为每次都是遍历这个数组中的内容，为了防止数据重复出现页面中，所有每次都要清理页面，让数据重新加载
cart.innerHTML="";//
//obj；当前点击按钮,
//找到按钮的父级元素td，找到td的父级元素tr
var tr=obj.parentNode.parentNode;
var proname=tr.children[0].innerText
var price=tr.cells[1].innerText;
//将商品相关属性封装称一个对象，方便处理
var goods=new Object();//定义对象，表示商品
goods.proname=proname;//将在商品列表中读取数据存放到商品对象对应的属性中
goods.price=price;
goods.num=1;
//判断当前商品是否在购物车中
var flag=false;//假设不在数组中
var index=-1//已找到商品的在 数组位置
for(var i=0;i<cart_arr.length;i ){
//用新添加的商品名称和数组中已有商品名称做对比，判断新添加的商品名称是否已存在
if(proname==cart_arr[i].proname){
flag=true;//找到该商品假设不成立，将假设的条件变更
index=i;//记录下商品位置
break;//已经找到，循环结束
}
}
//对商品在不在数组中做处理
if(flag==true){//在数组中，将该商品数量累加即可
cart_arr[index].num ;
}else{//不在数组中将新商品添加到数组中
cart_arr.push(goods)
}
//将购物车中的数据显示在页面中
for(var i=0;i<cart_arr.length;i ){
cart.innerHTML =cart_template.innerHTML
.replace("cart_proname",cart_arr[i].proname)
.replace("cart_price",cart_arr[i].price)
.replace("cart_subPrice",cart_arr[i].num*cart_arr[i].price)
.replace("cart_num",cart_arr[i].num)
}
}
下载声明：
评论