この記事では、ショッピングカートを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML
目次スケルトンスクリーンとは何ですか?デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...
目次JSはFileReaderを通じて.txtファイルの内容を取得します。 .txtファイルの読み取...
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...
目次概要1. パスモジュール2. モジュールまで3. fsモジュール4. イベントモジュール5. h...
目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...
使用制限クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要が...
この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...
1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...
名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...
この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...
Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...
記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...
UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...
デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...
プロジェクトシナリオ: Dark Horse Vueプロジェクト管理の実践、製品分類の取得、拡張バー...