この記事では、ショッピングカートを実装するための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
1. リストシンボルを設定するlist-style-type: attribute; //リストの...
目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...
目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...
目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...
Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...
図に示すように: ポートの使用状況を確認します: sudo netstat -apn | grep ...
この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...
voidキーワードの紹介まず、void キーワードは JavaScript で非常に重要なキーワード...
序文この記事では、山括弧のその他の用途をさらに詳しく見ていきます。前回の記事では、山括弧 (<...
いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...
序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...
目次ストレージエンジンのメモリ管理データ ページを LRU キューの先頭に置かないのはなぜですか?ダ...
ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...
目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...
キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...