购物车

tr表示行

td表示列 th可以加粗显示

<table border="1" cellspacing="0" width="500">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone</td>
<td>¥5999</td>
<td>
<button onclick="calc(this)">+</button>
<span>1</span>
<button onclick="calc(this)">-</button>
</td>
<td>¥5999</td>
</tr>
<tr>
<td>iphone</td>
<td>¥5999</td>
<td>
<button onclick="calc(this)">+</button>
<span>1</span>
<button onclick="calc(this)">-</button>
</td>
<td>¥5999</td>
</tr>
<tr>
<td>iphone</td>
<td>¥5999</td>
<td>
<button onclick="calc(this)">+</button>
<span>1</span>
<button onclick="calc(this)">-</button>
</td>
<td>¥5999</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>¥17997</td>
</tr>
</tfoot>
</table>
<script>

跨列colspan

跨行rowspan

function calc(btn){
//让n加1或减1通过btn的父元素找到span元素
var span=btn.parentElement
.querySelector("span");
//保存在变量span中获取span的内容保存在变量n中
var n=parseInt(span.innerHTML);
console.log(typeof(n));
//如果btn的内容是"+",就让n+1否则如果n>1,就n--,否则n=1
if(btn.innerHTML=="+"){
n++;
}else if(n>1){
n--
}else{
n=1
}
设置span的内容为n

span.innerHTML=n;
第二步让每行的小计变化

找到btn的父元素的前一个兄弟元素的内容

并截取出数字保存在变量price中

var price=btn.parentElement
.previousElementSibling
.innerHTML
.slice(1);
//声明subtotal表示小计，subtotal=pricen
var subtotal=pricen;
//找到btn的父元素的下一个兄弟元素并设置
// 内容为"¥"+subtotal.toFixed(2)
btn.parentElement
.nextElementSibling
.innerHTML="¥"+subtotal
.toFixed(2);
计算总价

获取tbody中每行最后一个td保存在tds中

var tds=document.querySelectorAll('tbody>tr>td:last-child');
console.log(tds);
for(var i=0,total=0;i<tds.length;i++){
total+=parseFloat(tds[i].innerHTML.slice(1));

}

document.querySelector('tfoot>tr>td:last-child').innerHTML='¥'+total.toFixed(2);

}
</script>
</body>