자 바스 크 립 트 로 간단 한 카 트 코드 예시

다음은 제 가 만 든 아주 간단 한 카 트 입 니 다.모두 원생 js 로 만 들 었 습 니 다.
css

<style>
  table{
   text-align: center;

  }
  table img{
   width: 50px;
  }
 a {
  text-decoration: none;
  color: red;
}
 </style>

body

<table border="1" cellspacing="0">
  <thead>
  <tr>
   <th>   <input type="checkbox" id="ckAll"/></th>
   <th>  </th>
   <th>  </th>
   <th>  </th>
   <th>  </th>
  </tr>
  </thead>
  <tbody>
   <tr>
    <td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/1.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="2"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">  </a></td>
   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/2.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="3"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">  </a></td>


   </tr>
   <tr><td><input type="checkbox" name="ck"/></td>
    <td>![](../img2/3.png)</td>
    <td>3</td>
    <td><input type="number" max="10" min="0" step="1" value="1"/></td>
    <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">  </a></td>


   </tr></tbody>
  <tfoot>
  <tr>
   <td colspan="3" align="right">  :</td>
   <td colspan="2"></td>
  </tr>
  </tfoot>

 </table>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dels">     </a>

js

<script>
  window.onload=function(){
   document.getElementById("ckAll").onclick=function(){//              
    var cks = document.getElementsByName("ck");//  ck  
    for(var i=0;i<cks.length;i++){ //      tr
     cks[i].checked=this.checked; //     tr      ckAll   
    }
   }
   var cks = document.getElementsByName("ck");//  ck  
   for(var i=0;i<cks.length;i++){ //      tr
    cks[i].onclick=function(){ //       tr           
      for(var i=0;i<cks.length;i++){//       td
       if(!cks[i].checked){ //           false    
        document.getElementById("ckAll").checked = false;//  ckAll   false
        return;
       }
      }
     document.getElementById("ckAll").checked = true;//     true        
    }
   }
   getSum();
    function getSum(){ //     
     var tbody = document.getElementsByTagName("tbody")[0];//  tbody  
     var sum =0;//   sum 0
      for(var i =0;i<tbody.children.length;i++){ //    tr
       var tr = tbody.children[i]; //tbody       tr
       var td = tr.children; //tr      td
       var price = parseFloat(td[2].innerText);//td            
       var count = parseFloat(td[3].children[0].value); //      
       sum+=price*count; //       *  
       td[3].children[0].onblur=function(){ //            
        getSum();
       }
      }
     var tfoot = document.getElementsByTagName("tfoot")[0]; //  tfoot  
     tfoot.children[0].children[1].innerHTML =sum; //tfootd        
    }

   var dels = document.getElementsByClassName("del");//  del  
   for(var i = 0;i<dels.length;i++){//    
    dels[i].onclick=function(){
     this.parentNode.parentNode.remove();
     getSum();
    }
   }
   document.getElementsByClassName("dels")[0].onclick=function(){
     var cks = document.getElementsByName("ck");
    for(var i = cks.length-1;i>=0;i--){
      if(cks[i].checked){
       cks[i].parentNode.parentNode.remove();
      }
    }
    getSum();

   }

  }
</script>

효과 도

이 카 트 는 js 를 공부 할 때 만 든 것 으로 비교적 간단 하지만 기본 적 인 기능 은 있다.
4.567917.모두 선택 할 수 있 고 한 가지 선택 이 가능 합 니 다.4.567918.

선택 한 항목 을 삭제 할 수 있 습 니 다

4.567917.총 수량 변화 에 따라 변화 할 수 있다.
여러분 은 온라인 편집기 로 효과 가 더욱 좋 을 것 입 니 다.
문제 가 있 으 면 언제든지 소통 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.