未封装版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="tbl">
<thead></thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone7</td>
<td>5488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5488</td>
</tr>
<tr>
<td>iphone8</td>
<td>6488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>6488</td>
</tr>
<tr>
<td>iphone9</td>
<td>7488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>7488</td>
</tr>
<tr>
<td>iphoneX</td>
<td>8488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>8488</td>
</tr>
<tr>
<td>RTX3090</td>
<td>20000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>20000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<script>
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
if(this.innerHTML=="+"){
var span=this.previousElementSibling;
var spanV=parseInt(span.innerHTML)+1;
if(spanV>0){
span.innerHTML=spanV;
var price=this.parentNode.previousElementSibling.innerHTML;
this.parentNode.nextElementSibling.innerHTML=price*spanV;
}
}else{
var span=this.nextElementSibling;
var spanV=parseInt(span.innerHTML)-1;
if(spanV>0){
span.innerHTML=spanV;
var price=this.parentNode.previousElementSibling.innerHTML;
this.parentNode.nextElementSibling.innerHTML=price*spanV;
}
}
var tbody=document.getElementsByTagName("tbody")[0];
var trs=tbody.children;
for(var i=0,sum=0;i<trs.length;i++){
sum+=parseInt(trs[i].lastElementChild.innerHTML);
}
total.innerHTML=sum;
}
}
var tbody=document.getElementsByTagName("tbody")[0];
var trs=tbody.children;
for(var i=0,sum=0;i<trs.length;i++){
sum+=parseInt(trs[i].lastElementChild.innerHTML);
}
total.innerHTML=sum;
</script>
</body>
</html>
封装版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="tbl">
<thead></thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone7</td>
<td>5488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5488</td>
</tr>
<tr>
<td>iphone8</td>
<td>6488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>6488</td>
</tr>
<tr>
<td>iphone9</td>
<td>7488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>7488</td>
</tr>
<tr>
<td>iphoneX</td>
<td>8488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>8488</td>
</tr>
<tr>
<td>RTX3090</td>
<td>20000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>20000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<script>
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
if(this.innerHTML=="+"){
calPrice(1,this)
}else{
calPrice(-1,this)
}
calcSum();
}
}
calcSum();
function calPrice(num,btn){
if(num==1){
var span=btn.previousElementSibling;
}else{
var span=btn.nextElementSibling;
}
var spanV=parseInt(span.innerHTML)+num;
if(spanV>0){
span.innerHTML=spanV;
var price=btn.parentNode.previousElementSibling.innerHTML;
btn.parentNode.nextElementSibling.innerHTML=price*spanV;
}
}
function calcSum(){
var tbody=document.getElementsByTagName("tbody")[0];
var trs=tbody.children;
for(var i=0,sum=0;i<trs.length;i++){
sum+=parseInt(trs[i].lastElementChild.innerHTML);
}
total.innerHTML=sum;
}
</script>
</body>
</html>
面向对象版购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead></thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone7</td>
<td>5488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5488</td>
</tr>
<tr>
<td>iphone8</td>
<td>6488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>6488</td>
</tr>
<tr>
<td>iphone9</td>
<td>7488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>7488</td>
</tr>
<tr>
<td>iphoneX</td>
<td>8488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>8488</td>
</tr>
<tr>
<td>RTX3090</td>
<td>20000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>20000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<table>
<thead></thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone7</td>
<td>5488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5488</td>
</tr>
<tr>
<td>iphone8</td>
<td>6488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>6488</td>
</tr>
<tr>
<td>iphone9</td>
<td>7488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>7488</td>
</tr>
<tr>
<td>iphoneX</td>
<td>8488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>8488</td>
</tr>
<tr>
<td>RTX3090</td>
<td>20000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>20000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<table>
<thead></thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone7</td>
<td>5488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5488</td>
</tr>
<tr>
<td>iphone8</td>
<td>6488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>6488</td>
</tr>
<tr>
<td>iphone9</td>
<td>7488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>7488</td>
</tr>
<tr>
<td>iphoneX</td>
<td>8488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>8488</td>
</tr>
<tr>
<td>RTX3090</td>
<td>20000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>20000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<script>
function shop(parent){
this.parent=parent;
this.btns=parent.getElementsByTagName("button");
this.span;
this.spanV;
this.price;
this.tbody=parent.getElementsByTagName("tbody")[0];
this.trs=this.tbody.children;
this.tfoot=parent.getElementsByTagName("tfoot")[0];
this.total=this.tfoot.children[0].lastElementChild;
}
shop.prototype.init=function(){
this.bind();
this.calcSum();
}
shop.prototype.bind=function(){
var me=this;
for(var i=0;i<this.btns.length;i++){
this.btns[i].onclick=function(){
if(this.innerHTML=="+"){
me.calePrice(1,this);
}else{
me.calePrice(-1,this);
}
}
}
}
shop.prototype.calePrice=function(num,btn){
this.findspan(num,btn);
this.btnstyle(btn);
this.calcSum();
}
shop.prototype.findspan=function(num,btn){
if(num==1){
this.span=btn.previousElementSibling;
}else{
this.span=btn.nextElementSibling;
}
this.spanV=parseInt(this.span.innerHTML)+num;
}
shop.prototype.btnstyle=function(btn){
if(this.spanV>0){
this.span.innerHTML=this.spanV;
this.price=btn.parentNode.previousElementSibling.innerHTML;
btn.parentNode.nextElementSibling.innerHTML=this.price*this.spanV;
}
}
shop.prototype.calcSum=function(){
for(var i=0,sum=0;i<this.trs.length;i++){
sum+=parseInt(this.trs[i].lastElementChild.innerHTML);
}
this.total.innerHTML=sum;
}
var tab=document.getElementsByTagName("table");
var shop1=new shop(tab[0]);
shop1.init();
var shop2=new shop(tab[1]);
shop2.init();
var shop3=new shop(tab[2]);
shop3.init();
</script>
</body>
</html>
