在javascript前端开发实例教程的第七章，用javascript开发购物车，其中before在谷歌和Firefox浏览器中可以正常显示，但是在ＩＥ浏览器中却找不到before对象而数据显示失败，这里改了before为insertBefore就可以正常显示。
先写一个go.html静态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的购物车</title>
<style>
body{
font: 16px/1.6em Arial, Helvetica, sans-serif;text-align: left;}
.cart{
border: 1px solid red;width: 600px;}
.cart-title{
background: #008000;width: 100%;height: 25px;color: white;font: 16px/1.6em Arial, Helvetica, sans-serif;font-weight: bold;text-align: center;}
.cart-table{
width: 100%;}
th{
text-align: center;}
td{
text-align: center;padding-top:5px ;padding-bottom: 5px;}
.cart-bottom td{
text-align: right;}
.cart-bottom span{
padding: 5px;}
.cart-reduce{
background-color: #000000;color: white;padding: 2px;}
.cart-add{
background-color: #000000;color: white;padding: 2px;}
.cart-num{
border: 1px solid #CCCCCC; padding: 5px;font-size: 12px;}
.cart-total-price{
color: red;}
</style>
</head>
<body>
<div class="cart">
<div class="cart-title">我的购物车</div>
<table class="cart-table">
<tr>
<th><span class="cart-all">全选</span>/<span class="cart-noall">反选</span></th><th>商品</th>
<th>单价</th><th>数量</th><th>小计</th><th>操作</th>
</tr>
<tr class="cart-item">
<td><input class="cart-check" type="checkbox" checked></td>
<td><span class="cart-name">Loading...</span></td>
<td><span class="cart-price">0</span></td>
<td>
<span class="cart-reduce">-</span>
<span class="cart-num">0</span>
<span class="cart-add">+</span>
</td>
<td><span class="cart-subtotal">0</span></td>
<td><span class="cart-del">删除</span></td>
</tr>
<tr class="cart-bottom">
<td colspan="6">
<span>已选择<span class="cart-total-num">0</span> 件商品</span>
<span>总计：<span class="cart-total-price">0</span>元</span>
<span><input type="button" value="结算"></span>
</td>
</tr>
</table>
</div>
<script src="ShopCart.js"></script>
<script>
ShopCart('cart',[
{
name:'Javascrpt实战',price:45.8,num:1},
{
name:'PHP基础案例教程',price:49.8,num:2},
{
name:'HTML+CSS网页制作',price:45.2,num:5},
{
name:'Java基础入门',price:45,num:8}
]);
</script>
</body>
</html>
然后编写ShopCart.js的代码
(function(window){
var ShopCart=function(prefix,defCart){
Find.prototype.prefix=prefix;
var cart=new Cart(document.getElementsByClassName(prefix)[0]);
for(var i in defCart){
cart.add(defCart[i]);
}
cart.updateTotal();
};
function Find(obj){
this.obj=obj;
}
Find.prototype.prefix='';
Find.prototype.className=function(className){
return this.obj.getElementsByClassName(this.prefix+'-'+className)[0];
};
function Cart(obj){
this.items=[];
var find=new Find(obj);
this.all=find.className('all');
this.noall=find.className('noall')
this.bottom=find.className('bottom');
this.num=find.className('total-num');
this.price=find.className('total-price');
this.tmp=find.className('item');
this.tmp.parentNode.removeChild(this.tmp);
var cart=this;
this.all.onclick=function(){
cart.checkAll();
};
this.noall.onclick=function(){
cart.checkNoall();
};
}
Cart.prototype.add=function(data){
var tmp=this.tmp.cloneNode(true);
var item= new Item(tmp,data);
var cart=this;
var t=cart.bottom.parentNode; //获取父级节点，方便等会儿调用,插入节点
item.check.onclick=function(){
cart.updateTotal();
};
item.add.onclick=function(){
item.num.textContent=++item.data.num;
item.updateSubtotal();
cart.updateTotal();
};
item.reduce.onclick=function(){
if(item.data.num>1){
item.num.textContent=--item.data.num;
item.updateSubtotal();
cart.updateTotal();
}else{
alert('至少选择１件，如果不需要，请直接删除');
}
};
item.del.onclick=function(){
if(confirm('你确定要删除此商品吗？')){
tmp.parentNode.removeChild(tmp);
cart.del(item);
cart.updateTotal();
}
};
item.updateSubtotal();
this.items.push(item);
t.insertBefore(tmp,cart.bottom); //这里是用的insertBefore来代替before,t是父级节点
};
Cart.prototype.updateTotal=function(){
var num=0,price=0;
for(var i in this.items){
var item=this.items[i];
if(item.check.checked){
num+=item.data.num;
price+=item.data.num*item.data.price;
}
}
this.num.textContent=num;
this.price.textContent=price.toFixed(2);
};
Cart.prototype.checkAll=function(){
for(var i in this.items){
this.items[i].check.checked=true;
}
this.updateTotal();
};
Cart.prototype.checkNoall=function(){
for(var i in this.items){
this.items[i].check.checked=false;
}
this.updateTotal();
};
Cart.prototype.del=function(item){
for(var i in this.items){
if(this.items[i]===item){
delete this.items[i];
}
}
};
function Item(tmp,data){
var find=new Find(tmp);
this.check=find.className('check');
this.name=find.className('name');
this.price=find.className('price');
this.num=find.className('num');
this.add=find.className('add');
this.reduce=find.className('reduce');
this.subtotal=find.className('subtotal');
this.del=find.className('del');
this.data=data;
this.name.textContent=data.name;
this.price.textContent=data.price.toFixed(2);
this.num.textContent=data.num;
}
Item.prototype.updateSubtotal=function(){
this.subtotal.textContent=(this.data.num*this.data.price).toFixed(2);
};
window['ShopCart']=ShopCart;
})(window);