DOM简易购物车实例

最新推荐文章于 2022-05-23 07:50:44 发布
最新推荐文章于 2022-05-23 07:50:44 发布
阅读量782 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingkong_333/article/details/73927594
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-spacing:0;
            border:1px solid #aaa;
        }
        th,td{
            width:100px;
            border:1px solid #aaa;
        }
    </style>
</head>
<body>
<table id="data">
    <thead>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>iPhone6</td>
            <td>¥4488.00</td>
            <td>
                <button οnclick="calc(this)">-</button>
                <span>1</span>
                <button οnclick="calc(this)">+</button>
            </td>
            <td>¥4488.00</td>
        </tr>
        <tr>
            <td>iPhone6 plus</td>
            <td>¥5288.00</td>
            <td>
                <button οnclick="calc(this)">-</button>
                <span>1</span>
                <button οnclick="calc(this)">+</button>
            </td>
            <td>¥5288.00</td>
        </tr>
        <tr>
            <td>iPad Air 2</td>
            <td>¥4288.00</td>
            <td>
                <button οnclick="calc(this)">-</button>
                <span>1</span>
                <button οnclick="calc(this)">+</button>
            </td>
            <td>¥4288.00</td>
        </tr>
    <tfoot>
        <tr>
            <td colspan="3">总计</td>
            <td>¥14064.00</td>
        </tr>
    </tfoot>
</table>


<script>
    function calc(btn){ //事件发生时，btn中自动获得点击的按钮
        //修改数量
        //找到当前按钮btn的父节点，保存在td中
        var td=btn.parentNode;
        //在td下找唯一的一个span元素，保存在span中
        var span=td.getElementsByTagName("span")[0];
        //取出span的内容转为数字后保存到变量n中
        var n=parseInt(span.innerHTML);
        //如果当前按钮的内容是+，则n++
        if(btn.innerHTML==="+"){
            n++;
        }else if(n!=1){n--;}//否则，如果n！=1，n--
        //将n写入span的内容
        span.innerHTML=n;


        ///计算小计/
        //找当前td的父元素tr
        var tr=td.parentNode;
        //找tr下所有td，保存在变量tds中
        var tds=tr.getElementsByTagName("td");
        //取出tds中第二个td的内容，从1位置截取剩余字符串，转为小数，保存在price中
        var price=parseFloat(tds[1].innerHTML.slice(1));
        //计算price*n，保存到变量sub中
        var sub=price*n;
        //将“¥:”+sub.toFixed(2)写回tds中第四个td中
        tds[3].innerHTML="¥"+sub.toFixed(2);


        计算总计
        //按id找到table
        var table=document.getElementById("data");
        //找到table下的tbody
        var tbody=table.getElementsByTagName("tbody")[0];
        //找到tbody下的所有tr，保存在trs
        var trs=tbody.getElementsByTagName("tr");
        //遍历trs中每个tr，同时声明变量total=0
        for(var i=0,len=trs.length,total=0;i<len;i++){
        //  找到当前tr下的第四个td
            var td1=trs[i].getElementsByTagName("td")[3];
        //  取出td中的内容，从1位置截取剩余字符，转为小数，累加到total中
            total+=parseFloat(td1.innerHTML.slice(1));
        }//遍历结束后
        //找到table下的所有td，保存在tds中
        var tds1=table.getElementsByTagName("td");
        //将“¥；”+total.toFixed（2）放入tds中最后一个td中
        tds1[tds1.length-1].innerHTML="¥"+total.toFixed(2);
    }
</script>


</body>
</html>

wth_xk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现简单的购物车功能
七月的你的博客
09-03 1332
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
js中的DOM模拟购物车功能
10-20
本篇文章主要介绍了js中的DOM模拟购物车功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
dom版购物车
mylove_non的博客
08-20 551
dom版购物车的实现 html: <table border="1" cellspacing="0" id="table"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead>
js--实现购物车
weixin_44892520的博客
08-06 169
动态创建/添加元素
jQuery 和DOM 实现的简易购物车
梁甜田的博客
04-24 398
1、DOM版 <html> <head> <meta charset="UTF-8"> <title>DOM版我的购物车</title> <style> #tb{ border:1px solid #000; width: 600px; ...
DOM简易版购物车
m0_55987159的博客
05-12 100
let shopArr = [{ index: 1, shopName: “Apple”, price: 100, count: 1 }, { index: 2, shopName: “HuaWei”, price: 200, count: 1 }, { index: 3, shopName: “xiaomi”, price: 300, count: 1 }, { index: 4, shopName: “vivo”, price: 400, count: 1 }, { index: 5, shopName
简易的购物车.zip
05-06
使用Dom树来实现简易的购物车,这个Dome最主要的是练习Dom树。了解Dom树的例子，使以后的开发中对Dom操作有更深入的，原理可以看我的博客-掌握js的Dom树-，希望这个对你有所帮助。
用JavaScript做简易的购物车的代码示例
10-19
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的购物车功能。这个购物车示例主要展示了如何使用原生JavaScript处理...学习和实践这样的例子有助于加深对JavaScript事件处理、DOM操作和前端交互设计的理解。
Codeigniter的dom类用法实例
10-24
主要介绍了Codeigniter的dom类用法,实例分析了基于Codeigniter的dom操作技巧,需要的朋友可以参考下
一个简单购物车案例.html
04-24
一个简单的vue购物车案例，希望能够对你们有用，希望各位不要嫌弃。
javascript实现简易购物车(高手勿喷)
04-21
用Javascript写的一个简易购物车，主要是对表格的操作。新手。。高手勿喷。。换个积分不容易啊。
简单购物车程序实现 （JavaScript）
04-19
简单购物车程序实现 购物车的功能包括： 显示所有产品信息 选择相应产品添加到购物车 查看购物车 包括统计购物车中所有产品的总价格 删除购物车中的商品 返回显示所有产品信息页面 显示所有产品信息页面 查看购物车页面 每个产品包括：产品编号、产品名称、产品描述、产品价格 所有的产品数据，不是来自数据库，而是用集合存储的固定数据。也就是说，我们操作的购物车产品，是从集合中进行获取的
原生js多种购物车集合
10-26
原生js写的购物车，有简单表格的，有一般的购物车还有主流电商网站购物车效果，京东和淘宝购物车效果，实现数量，总价金额的变化！！
js DOM应用---购物车
weixin_45494667的博客
07-04 185
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table, th
js前端开发案例教程之DOM购物车（动手实践：购物车）
aka_xyz的博客
12-09 4007
js前端开发案例教程 之 DOM购物车（动手实践：购物车） html和css <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> .cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;} .
5.21 制作一个简易的购物车效果 JS的这些Dom基础内容快来学习吧
qq_15832739的博客
05-23 417
前言：目前正在学习JS的一些基础内容，会将学习到的持续分享到博客，欢迎萌新观看 一、节点关系 1.父节点 parentElement // 获取到父节点 var parent = document.getElementById("parent"); 2.所有子节点 children // 获取到所有的子节点 console.log(parent.children); 3.第一个子节点 firstElementChild // 第一个子节点 var fir...
DOM四步来写购物车效果
chen_c_的博客
03-20 612
一、用DOM四步来写购物车效果 1.DOM四步 a. 先查找触发事件的元素 b. 为元素绑定事件处理函数 c. 再查找要修改的元素 d. 修改元素 代码如下（示例）： <script> //1.1 先查找id为data的table var table=document.getElementById("data"); //1.2 再查找table下所有button元素 var buttons=table.getElementsByTagName("button");
json数据及追加
zichuanhuo221的博客
12-29 2242
function loadGoods(jsonData){ for(var i=0;i var _box =document.createElement("div"); _box.className = "box"; var _img = document.createElement("img"); _img["src"]=jsonData[i].image;
DOM 实现购物车的实时变化
HeWar_的博客
10-13 145
<!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" /> &...
echarts formatter创建dom实例
最新发布
04-29
可以使用 echarts 的 formatter 函数来创建 dom 实例。 在 formatter 函数中，可以使用 document.createElement() 方法创建任何需要的 DOM 元素。例如，下面的代码演示如何在 tooltip 中创建一个包含图片的 div ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值