• 售前

  • 售后

热门帖子
入门百科

原生JavaScript实现购物车

[复制链接]
聪明牛得 显示全部楼层 发表于 2021-10-25 19:01:12 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了JavaScript实现购物车的详细代码,供各人参考,详细内容如下
效果:

代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. *{
  8. margin: 0;
  9. padding:0;
  10. }
  11. .box{
  12. width:600px;
  13. margin: 10px auto;
  14. background: url(img/g.jpg) ;
  15. height:500px;
  16. }
  17. td{
  18. text-align: center;
  19. font-size: 30px;
  20. color:orangered;
  21. }
  22. button{
  23. width:150px;
  24. border:0;
  25. border-radius: 5px;
  26. height:30px;
  27. background-color: dodgerblue;
  28. }
  29. /*.trl:hover{
  30. background:pink;
  31. }*/
  32. </style>
  33. </head>
  34. <body>
  35. <div class="box">
  36. <br />
  37. <button>全部刪除</button>
  38. <button>選中删除</button>
  39. <br>
  40. <br>
  41. <input type="text" value="请输入关键字" />
  42. <input type="button" value="搜索" />
  43. <br>
  44. <br>
  45. <table width='600' border="1" cellspacing="0">
  46. <tr>
  47.   <th><input type="checkbox" class="qx" />全选</th>
  48.   <th>商品</th>
  49.   <th>价格</th>
  50.   <th>序列号</th>
  51.   <th>产地</th>
  52.   <th>品牌</th>
  53.   <th>操作</th>
  54. </tr>
  55. <tr class="trl">
  56.   <td><input type="checkbox" class="dx" /></td>
  57.   <td class="shop">榴莲</td>
  58.   <td>20元</td>
  59.   <td class="ind">1</td>
  60.   <td>海南</td>
  61.   <td>安牌</td>
  62.   <td onclick="del(this)">删除</td>
  63. </tr>
  64. <tr class="trl">
  65.   <td><input type="checkbox" class="dx" /></td>
  66.   <td class="shop">苹果</td>
  67.   <td>20元</td>
  68.   <td class="ind">2</td>
  69.   <td>海南</td>
  70.   <td>安牌</td>
  71.   <td onclick="del(this)">删除</td>
  72. </tr>
  73. <tr class="trl">
  74.   <td><input type="checkbox" class="dx" /></td>
  75.   <td class="shop">草莓</td>
  76.   <td>20元</td>
  77.   <td class="ind">3</td>
  78.   <td>海南</td>
  79.   <td>安牌</td>
  80.   <td onclick="del(this)">删除</td>
  81. </tr>
  82. <tr class="trl">
  83.   <td><input type="checkbox" class="dx" /></td>
  84.   <td class="shop">香蕉</td>
  85.   <td>20元</td>
  86.   <td class="ind">4</td>
  87.   <td>海南</td>
  88.   <td>安牌</td>
  89.   <td onclick="del(this)">删除</td>
  90. </tr>
  91. </table>
  92. </div>
  93. <script>
  94. // 全选全不选
  95.    
  96.    var qx=document.getElementsByClassName('qx')[0];
  97.    var dx=document.getElementsByClassName("dx");
  98.    qx.onclick=function(){
  99.     for(var i=0;i<dx.length;i++){
  100.     dx[i].checked=qx.checked
  101.     }
  102.    }
  103. //全部删除
  104.    var btn=document.getElementsByTagName("button");
  105.    var tr=document.getElementsByTagName('tr');
  106.    var tbody=document.getElementsByTagName("tbody")[0];
  107.    btn[0].onclick=function(){
  108.     for(var i=1;i<tr.length;i++){
  109.      tbody.removeChild(tr[i]);
  110.      i--;
  111.     }      
  112.    }
  113. //选中删除
  114.    var dx=document.getElementsByClassName('dx');
  115.    btn[1].onclick=function(){
  116.    for(var i=0;i<dx.length;i++){
  117.     if(dx[i].checked==true){
  118.     tbody.removeChild(dx[i].parentNode.parentNode)
  119.     i--;
  120.     indChange();
  121.     }
  122.    }
  123.    }
  124. //清空文本框  搜索变颜色
  125.   var input=document.getElementsByTagName('input');
  126.   
  127.   input[0].onfocus=function(){
  128.   this.value=""
  129.   }
  130.   
  131.   var shop=document.getElementsByClassName('shop');
  132.   
  133.   input[1].onclick=function(){
  134.    for(var i=0;i<shop.length;i++){
  135.    
  136.    if(shop[i].innerHTML==input[0].value){
  137.    for(var j=0;j<shop.length;j++){
  138.    shop[j].parentNode.style.background=""
  139.    }
  140.    shop[i].parentNode.style.background="yellow"
  141.    }
  142.    }
  143.   }
  144.   
  145. //
  146. //移入移出 hover
  147.   for(var i=1;i<tr.length;i++){
  148.   tr[i].onmouseover=function(){
  149.   this.style.background="pink"
  150.   }
  151.   tr[i].onmouseout=function(){
  152.   this.style.background=""
  153.   }
  154.   
  155.   }
  156. //单行删除(序列号)
  157. // 父元素.removeChild(子元素) tbody 删除tr
  158. function del(t){
  159.   tbody.removeChild(t.parentNode);
  160.   indChange();
  161. }
  162. //序列号
  163. function indChange(){
  164.   var ind=document.getElementsByClassName("ind");
  165.   for(var i=0;i<ind.length;i++){
  166.   ind[i].innerHTML=i+1;
  167.   }
  168. }
  169. </script>
  170. </body>
  171. </html>
复制代码
以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作