购物车（js入门级示例）

【实例简介】

    该实例主要讲解了使用数组实现动态购物车，数据初始化，全选，动态添加等

【实例截图】

【核心代码】

//页面加载时初始化(模拟)一下商品数据
  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)
                 }

}