js实现购物车效果

最新推荐文章于 2024-05-18 20:31:13 发布

匠心独特

最新推荐文章于 2024-05-18 20:31:13 发布

阅读量3.3k

点赞数 1

分类专栏：网页前端学习记录文章标签： javascript 购物车

本文链接：https://blog.csdn.net/sinat_31766075/article/details/50486170

版权

在网页中实现动态添加物品的效果.
代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
    </style>
    <script type="text/javascript">
    </script>
    <script type="text/javascript">
        /*定义事件时,若传入this,它是本次触发事件的对象*/
        //调用该函数时传入了this,它就是正在单击的按钮对象,需要声明参数
        //来接收此对象.即obj=this=正在点的按钮.
        function add_shoppingcart(btn){
    
            //获取btn所在的行。
            var tr = btn.parentNode.parentNode;
            //获取btn下的所有列
            var tds = tr.children;
            //获取商品名称
            var name = tds[0].innerHTML;
            //获取商品价格
            var price = parseInt(tds[1].innerHTML);
            console.log(name+":"+price);



            //创建一个新的行
            var ntr = document.createElement("tr");
            ntr.innerHTML = 
             '<td>'+name+'</td>'+
             '<td>'+price+

最低0.47元/天解锁文章

匠心独特

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js实现购物车效果

在网页中实现动态添加物品的效果. 代码如下:<!DOCTYPE html><html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table {
复制链接

扫一扫