该购物单包含：商品表格，若干物品，每件物品的名称、单价、金额以及取消订单，最后计算总价
主要功能实现：
每一种商品都可以对购买数量进行+1和-1操作，可以取消订单
主要方法实现：
数量的加一事件，减一事件，取消订单事件，添加商品方法，计算总价方法
添加商品
function add(){
var name=document.getElementById("name");
var price=document.getElementById("price");
var table=document.getElementById("tb1");
var tr=table.insertRow(table.rows.length-1);
var n=name.value;
if(n==""){
alert("商品名为空");
return;
}
var p=parseFloat(price.value);
if(isNaN(p)){
alert("价格不为数字");
return ;
}
tr.innerHTML="<td>"+n+"</td>"+"<td>"+p.toFixed(2)+"</td>"+
"<td><input type='button' value='-' onclick='change(this,-1);'>"+
" <span>1</span> "+
"<input type='button' value='+' onclick='change(this,+1);'>"+
"</td>"+
"<td>"+(p*1)+"</td>"+
"<td><input type='button' value='x' onclick='del(this);'</td>";
total();//重新计算总金额
}
购买数量加一或者减一事件
function change(btn,n){//n为1或-1
//获取span节点
var td=btn.parentNode;
var tr=td.parentNode;
var table=tr.parentnode;
var span=td.getElementsByTagName("span")[0];
//获取商品的数量
var num=parseInt(span.innerHTML);
//将数量加n
num+=n;
if(num<=0){
return;
}
//将数量写到span节点
span.innerHTML=num;
//获取单价
var price=parseFloat(tr.cells[1].innerHTML);
//获取金额节点
var allprice=tr.cells[3];
//单价*数量
var allpricevalue=num*price;
//写到金额
allprice.innerHTML=allpricevalue;
total();
}
取消订单事件
function del(btn){
//获取td
var td=btn.parentNode;
//获取tr
var tr=td.parentNode;
//获取商品名称
var name=tr.cells[0].innerHTML;
//获取tr的父节点table
var table =tr.parentNode;
//删除tr
if(confirm("确定要删除"+name+"吗?")){
table.deleteRow(tr.rowIndex);
}
total();
}
计算总金额方法
function total(){
//获取table
var table=document.getElementById("tb1");
//获取总价节点
var sumNode=table.rows[table.rows.length-1].cells[1];
//获取每一行,获取每一行的价格相加
var i=1;
var sum=0.00;
for(;i<=table.rows.length-2;i++){
var tr=table.rows[i];
sum+=parseFloat(tr.cells[3].innerHTML);
}
//值放回总价节点
sumNode.innerHTML=sum;
}
本案例全部代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <script type="text/javascript"> function add(){ var name=document.getElementById("name"); var price=document.getElementById("price"); var table=document.getElementById("tb1"); var tr=table.insertRow(table.rows.length-1); var n=name.value; if(n==""){ alert("商品名为空"); return; } var p=parseFloat(price.value); if(isNaN(p)){ alert("价格不为数字"); return ; } tr.innerHTML="<td>"+n+"</td>"+"<td>"+p.toFixed(2)+"</td>"+ "<td><input type='button' value='-' onclick='change(this,-1);'>"+ " <span>1</span> "+ "<input type='button' value='+' onclick='change(this,+1);'>"+ "</td>"+ "<td>"+(p*1)+"</td>"+ "<td><input type='button' value='x' onclick='del(this);'</td>"; total();//重新计算总金额 } function change(btn,n){//n为1或-1 //获取span节点 var td=btn.parentNode; var tr=td.parentNode; var table=tr.parentnode; var span=td.getElementsByTagName("span")[0]; //获取商品的数量 var num=parseInt(span.innerHTML); //将数量加n num+=n; if(num<=0){ return; } //将数量写到span节点 span.innerHTML=num; //获取单价 var price=parseFloat(tr.cells[1].innerHTML); //获取金额节点 var allprice=tr.cells[3]; //单价*数量 var allpricevalue=num*price; //写到金额 allprice.innerHTML=allpricevalue; total(); } function del(btn){ //获取td var td=btn.parentNode; //获取tr var tr=td.parentNode; //获取商品名称 var name=tr.cells[0].innerHTML; //获取tr的父节点table var table =tr.parentNode; //删除tr if(confirm("确定要删除"+name+"吗?")){ table.deleteRow(tr.rowIndex); } total(); } function total(){ //获取table var table=document.getElementById("tb1"); //获取总价节点 var sumNode=table.rows[table.rows.length-1].cells[1]; //获取每一行,获取每一行的价格相加 var i=1; var sum=0.00; for(;i<=table.rows.length-2;i++){ var tr=table.rows[i]; sum+=parseFloat(tr.cells[3].innerHTML); } //值放回总价节点 sumNode.innerHTML=sum; } </script> <style type="text/css"> #tb1{ border: 1px solid #ccc; border-radius:10px; width: 400px; border-collapse:collapse; margin: 0 auto; padding: 20px; } tr{ background-color: #fff; padding: 30px; } tr:hover{ background-color: #fff681; } th,td{ text-align: center; padding: 10px; } fieldset{ margin: 0 auto; width: 520px; } </style> </head> <body> <div id="cardid"> <fieldset> <legend>购物表</legend> <table id="tb1"> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>操作</th> </tr> <tr> <td colspan="3">总计</td> <td>0.00</td> <td></td> </tr> </table> </fieldset> <fieldset> <legend>添加模块</legend> <p> <label>商品</label> <input type="text" id="name" name="name"> </p> <p> <label>单价</label> <input type="text" id="price"> </p> <div> <input type="button" value="添加" onclick="add();"> </div> </fieldset> </div> </body> </html>
