介绍 & lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
,& lt; title> new document & lt;/title>
,& lt; meta charset=皍tf-8"比;
,& lt; style>
{,表
,边界:1 px solid # 000;
,border-collapse:崩溃;
,宽度:600 px;
,}
,td {
,边界:1 px solid # 000;
,text-align:中心;
,}
,& lt;/style>
,& lt;/head>
,& lt; body>
,& lt; table>
,& lt; thead>
,& lt; tr>
,& lt; td>名称& lt;/td>
,& lt; td>单价& lt;/td>
,& lt; td>数量& lt;/td>
,& lt; td>小计& lt;/td>
,& lt;/tr>
,& lt;/thead>
,& lt; tbody id=皌body"比;
,& lt; tr>
,& lt; td> iphone6
,& lt; td> 4488 & lt;/td>
,& lt; td>
& lt;才能button onclick=癰tnClick(这)“祝辞& lt;/button>
& lt;才能span> 1 & lt;/span>
& lt;才能button onclick=癰tnClick(这)“在+ & lt;/button>
,& lt;/td>
,& lt; td> 4488 & lt;/td>
,& lt;/tr>
,& lt; tr>
,& lt; td> iphone6
,& lt; td> 5288 & lt;/td>
,& lt; td>
& lt;才能button onclick=癰tnClick(这)“祝辞& lt;/button>
& lt;才能span> 1 & lt;/span>
& lt;才能button onclick=癰tnClick(这)“在+ & lt;/button>
,& lt;/td>
,& lt; td> 5288 & lt;/td>
,& lt;/tr>
,& lt; tr>
,& lt; td> iphone6
,& lt; td> 4288 & lt;/td>
,& lt; td>
& lt;才能button onclick=癰tnClick(这)“祝辞& lt;/button>
& lt;才能span> 1 & lt;/span>
& lt;才能button onclick=癰tnClick(这)“在+ & lt;/button>
,& lt;/td>
,& lt; td> 4288 & lt;/td>
,& lt;/tr>
,& lt;/tbody>
,& lt; tfoot>
,& lt; td colspan=?“,对齐=皉ight"在总计:& lt;/td>
,& lt; td id=癮ll_total"祝辞& lt;/td>
,& lt;/tfoot>
,& lt;/table>
,& lt; script>
,function btnClick (btn) {
,//声明,spanValue 变量,用于保存,跨中的数据
,var spanValue;//1,更改,span 中的数据
,//1.1判断,btn 是+还是-==,如果(btn.textContent “+”) {
,//1.2根据,btn 找到,跨度
,var 跨度=btn.previousElementSibling;
,//1.3获取,跨度里的数据
,spanValue=https://www.yisu.com/zixun/parseInt (span.textContent);//1.4更新跨越中的数据
spanValue +=1;
span.textContent=spanValue;
其他}{//减法操作
var跨度=btn.nextElementSibling;//1.3获取跨度里的数据
spanValue=方法(span.textContent);//1.4更新跨越中的数据
如果(spanValue> 1) {
spanValue -=1;
span.textContent=spanValue;
}
}//2。计算小计//2.1先获取单价元素(tdPrice)
var tdPrice=btn.parentNode.previousElementSibling;//2.2获取单价元素中的数值(价格)
价格=var方法(tdPrice.textContent);//2.3计算小计(spanValue *价格),保存在
var=的总价格* spanValue;//2.4获取小计元素(tdTotal)
var tdTotal=btn.parentNode.nextElementSibling;//2.5将总共的值赋值给tdTotal元素
tdTotal.textContent=总;//调用计算总计的函数
calAllTotal ();
}/* *
*计算总计
*/函数calAllTotal () {//1,获取id为身体中的所有tr
tbody=var . getelementbyid(“身体”);
var trs=tbody.getElementsByTagName (tr);
console.log (trs);//2,循环遍历所有tr,找到每个tr的最后一个道明
var all_total=0;
我(var=0;
这篇文章给大家介绍怎么在JavaScript中利用DOM实现一个购物车功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>代码如下: