ネイティブ JavaScript でショッピングカートを実装する

この記事では、ショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果：

コード：

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="UTF-8">
 <タイトル></タイトル>
 <スタイル>
 *{
 マージン: 0;
 パディング:0;
 }
 。箱{
 幅:600ピクセル;
 マージン: 10px 自動;
 背景: url(img/g.jpg);
 高さ:500px;
 }
 td{
 テキスト配置: 中央;
 フォントサイズ: 30px;
 色：オレンジ;
 }
 ボタン{
 幅:150ピクセル;
 境界線:0;
 境界線の半径: 5px;
 高さ:30px;
 背景色: ドジャーブルー;
 }
 
 /*.trl:ホバー{
 背景:ピンク;
 }*/
 
 </スタイル>
 </head>
 <本文>
 <div class="box">
 <br />
 <button>すべて削除</button>
 <button>削除を選択</button>
 <br>
 <br>
 <input type="text" value="キーワードを入力してください" />
 <input type="button" value="検索" />
 
 <br>
 <br>
 <テーブルの幅='600' 境界線="1" セル間隔="0">
 <tr>
  <th><input type="checkbox" class="qx" />すべて選択</th>
  <th>製品</th>
  <th>価格</th>
  <th>シリアル番号</th>
  <th>起源</th>
  <th>ブランド</th>
  <th>オペレーション</th>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">ドリアン</td>
  <td>20元</td>
  <td class="ind">1</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">アップル</td>
  <td>20元</td>
  <td class="ind">2</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">ストロベリー</td>
  <td>20元</td>
  <td class="ind">3</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">バナナ</td>
  <td>20元</td>
  <td class="ind">4</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 </テーブル>
 </div>
 <スクリプト>
//すべて選択するか、何も選択解除します var qx=document.getElementsByClassName('qx')[0];
   var dx = document.getElementsByClassName("dx");
   qx.onclick=関数(){
    (var i=0;i<dx.length;i++){
    dx[i].checked=qx.checked
    }
   }
 //すべて削除 var btn=document.getElementsByTagName("button");
   タグ名によって要素を取得します。
   var tbody = document.getElementsByTagName("tbody")[0];
   btn[0].onclick=関数(){
    for(var i=1;i<tr.length;i++){
     tbody.removeChild(tr[i]);
     私 - ;
    }       
   }
 //選択して削除 var dx=document.getElementsByClassName('dx');
   btn[1].onclick=関数(){
   (var i=0;i<dx.length;i++){
    if(dx[i].checked==true){
    tbody.removeChild(dx[i].parentNode.parentNode)
    私 - ;
    indChange();
    }
   }
   }
 // テキスト ボックスをクリアして検索し、色を変更します。var input = document.getElementsByTagName('input');
  
  入力[0].onfocus=関数(){
  this.value=""
  }
  
  var shop = document.getElementsByClassName('shop');
  
  input[1].onclick=関数(){
   for(var i=0;i<shop.length;i++){
   
   if(shop[i].innerHTML==input[0].value){
   (var j=0;j<shop.length;j++){
   ショップ[j].parentNode.style.background=""
   }
   shop[i].parentNode.style.background="黄色"
   }
   }
  }
  
// 
//ホバーの内外を移動する 
  for(var i=1;i<tr.length;i++){
  tr[i].onmouseover=関数(){
  this.style.background="ピンク"
  }
  tr[i].onmouseout=関数(){
  このスタイルの背景=""
  }
  
  }

// 単一行削除（シリアル番号）
// 親要素.removeChild(子要素) tbody delete tr
 関数del(t){
  tbody.removeChild(t.parentNode);
  indChange();
 }
 
 
 //シリアル番号関数 indChange(){
  var ind = document.getElementsByClassName("ind");
  for(var i=0;i<ind.length;i++){
  ind[i].innerHTML=i+1;
  }
 }
 
 
 </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: