javascript对DOM操作实例之购物车_javascript购物车案例dom，2024年最新面试必知必会

//创建一个tr将其插入到购物车table下 var tbody = document.getElementById("goods"); //在tbody下插入一行 var ntr = tbody.insertRow(); //直接去写的 ntr.innerHTML = ''+name+''+ ''+price+''+ ''+ ''+ ''+ ''+price+''+ ''; total(); } //删除tr function sc(btn){ //获取要删除的tr var tr = btn.parentNode.parentNode; //tr的父亲然后删除孩子tr，删除的tr就是上面的那么用btn获取的tr tr.parentNode.removeChild(tr); total(); } //增加数量 function increase (btn){

var td =btn.parentNode; var inputs = td.getElementsByTagName("input"); var text = inputs[1]; //获取当前行的数量 var amount = parseInt(text.value); //将数量+1 text.value =++amount; var tr = btn.parentNode.parentNode; var tds = tr.getElementsByTagName("td"); var price = parseFloat(tds[1].innerText); tds[3].innerText = price*amount; //计算金额 = 单价*数量； total(); } //减法 function decrease(btn){ var td = btn.parentNode; var inputs = td.getElementsByTagName("input"); //数量 var text = inputs[1]; var amount = parseInt(text.value); //让小于1后就按钮就失效了。尽量不要提示。 if (amount==1){ //等于1的时候这个函数就结束，不再执行了。 return; } //减少数量 text.value = --amount; //改变全额 var tr = btn.parentNode.parentNode; var tds = tr.getElementsByTagName("td"); //获取单价 var price = parseFloat(tds[1].innerText); tds[3].innerText=price*amount;

total(); }

function total(){

//1、获取购物车中的商品行 var tbody = document.getElementById("goods"); var trs = tbody.getElementsByTagName("tr"); //2、遍历这些行，获取每一行的金额 var sum=0; for(var i = 0; i<trs.length;i++){ //当前行 var tr = trs[i]; //取当前行的金额列，即第四列 var tds = tr.getElementsByTagName("td"); var mny = parseFloat(tds[3].innerText); //3、将每一行的金额累计

sum+=mny;

}

//4、将合计值写入到合计行中 var total = document.getElementById("total"); total.innerText = sum; }

table, tr, td { border: 1px solid; border-collapse: collapse; margin: 60px auto; } body { font-family: "Courier New", Courier, monospace; font-size: 16px; } td { padding: 10px; } p { font-size: 36px; text-align: center; } thead { background-color: #CCC; } tr:hover { background-color: #CCC; }

商品

商品	单价	颜色	库存	好评率	操作
罗技鼠标	80	黑色	893	98%	加入购物车
键盘	150	黑色	9028	96%	加入购物车
手机壳	60	透明	672	99%	加入购物车
U盘	70	红色	482	100%	加入购物车
蓝牙耳机	100	蓝色	8937	95%	加入购物车

购物车

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取