文档章节

经典案例--JS购物车

x
 xwminren
发布于 2015/10/08 23:27
字数 644
阅读 70
收藏 0
<!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">
      var tbody;
      function add_shoppingcart(btn){
        //1.根据点击的按钮获取同行的商品名和单价
        //根据点击的按钮找到其爷爷tr
        var tr = btn.parentNode.parentNode;
        //找出爷爷tr的所有td孩子
        var tds = tr.getElementsByTagName("td");
        //第一个td的内容是商品名
        var name = tds[0].innerText;
        //第二个td的内容是单价
        var price = tds[1].innerText;
        
        tbody = document.getElementById("goods");
        //2.创建一个tr,将其插入到购物车table下
        var amount = 1;
        if(!has_goods(name)){         
          
          //var ntr = tbody.insertRow();
          var ntr = document.createElement("tr");        
          ntr.innerHTML = 
          '<td>'+name+'</td>'+
          '<td>'+price+'</td>'+
          '<td align="center">'+
            '<input type="button" value="-" onclick="reduce(this);"/> '+
            '<input type="text" size="3" readonly value='+amount+'> '+
            '<input type="button" value="+" onclick="add(this);"/>'+
          '</td>'+
          '<td>'+price+'</td>'+
          '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>';
          //在tbody下插入一行
          tbody.appendChild(ntr);
        } else {
          var trs = tbody.getElementsByTagName("tr");
          for(var i=0;i<trs.length;i++){
            if(trs[i].getElementsByTagName("td")[0].innerText==name){
              amount = trs[i].getElementsByTagName("td")[2].getElementsByTagName("input")[1].value++;              
              trs[i].getElementsByTagName("td")[3].innerText = (++amount)*price;
            }
          }
        }
      }
      
      function has_goods(name){
    	tbody = document.getElementById("goods");
        var trs = tbody.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
          if(trs[i].getElementsByTagName("td")[0].innerText==name){
            return true;            
          }
        }
        return false;
      }
      
      function add(btn){
    	  var input = btn.parentNode.getElementsByTagName("input")[1];
    	  var amount = ++input.value;
    	  var price = btn.parentNode.parentNode.getElementsByTagName("td")[1].innerText
    	  btn.parentNode.parentNode.getElementsByTagName("td")[3].innerText = amount*price;
      }
      function reduce(btn){
    	  
    	  var input = btn.parentNode.getElementsByTagName("input")[1];    	  
    	  var amount = --input.value;
    	  if(amount<1){
    		  amount = ++input.value;
    	  }
    	  var price = btn.parentNode.parentNode.getElementsByTagName("td")[1].innerText
    	  btn.parentNode.parentNode.getElementsByTagName("td")[3].innerText = amount*price;
      }
      
      function del(btn){
    	  var tr = btn.parentNode.parentNode;
    	  btn.parentNode.parentNode.parentNode.removeChild(tr);
      }
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table>
  
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
             
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>


© 著作权归作者所有

上一篇: jQuery基础知识01
下一篇: WEB基础02
x
粉丝 1
博文 10
码字总数 8101
作品 0
太原
私信 提问
JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪
2018/05/29
0
0
MV* 框架 与 DOM操作为主 JS库 的案例对比

最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库 与 MV* 框架的对比 案例(MV* 框架 与 DOM操作 JS库 实例对比) 购物车页面 JS业务逻辑(忽略 Ajax请求...

子凡
09/29
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
63
0
网络机器人的识别与攻防的经典案例(也即爬虫与反爬虫的经典案例)

本文我们介绍一个网络机器人的识别与攻防的经典案例(也即爬虫与反爬虫的经典案例)。使用到的代码见本人的superword项目: https://github.com/ysc/superword/blob/master/src/main/java/o...

杨尚川
2015/04/11
2.3K
0
一个纯javascript实现的购物车 - SimpleCart

作者:Terry li - GBin1.com simpleCart是一个纯javascript实现的购物车,免数据库支持,免编程,没有复杂的配置烦恼,短小精悍,只有40K大小。轻量级并且可定制,非常适合在自己的应用中插入...

gbin1
2011/06/29
326
0

没有更多内容

加载失败,请刷新页面

加载更多

一个activity中多个handler和消息的处理过程

Ø 能否有多个handler handler的构造方法 public Handler() { …. mLooper = Looper.myLooper(); mQueue = mLooper.mQueue; mCallback = null; … } 因为几乎主要的成员变量都是从Looper中拿......

shzwork
32分钟前
3
0
一起来学Java8(一)——函数式编程

在这篇文章中,我们将了解到在Java8下如何进行函数式编程。 函数式编程 所谓的函数式编程就是把函数名字当做值进行传递,然后接收方拿到这个函数名进行调用。 首先来看下JavaScript如何进行函...

猿敲月下码
52分钟前
3
0
vue 源码 断点调试

本文转载于:专业的前端网站➥vue 源码 断点调试 1、添加sourceMap sourceMap: true 2、npm run dev 会生成vue.js.map 3、断点调试 <!DOCTYPE html><html> <head> <meta cha......

前端老手
今天
4
0
流量运营系统demo1

TopkURLMapper public class TopkURLMapper extends Mapper<LongWritable, Text, Text, FlowBean> {private FlowBean bean = new FlowBean();private Text k = new Text();@Ove......

Garphy
今天
4
0
OSChina 周六乱弹 —— 如果是个帅小伙你愿意和他出去吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《Ghost 》游戏《死亡搁浅》原声 《Ghost 》游戏(《死亡搁浅》原声) - Au/Ra / Alan Walker 手机党少年们想听歌,请使劲儿戳...

小小编辑
今天
435
15

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部