この記事では、ショッピングカートを実装するための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. プロセスとスレッドの概念2. ブラウザの原則3. 同期と非同期4. 実行スタックとタスクキ...
Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...
目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...
1.ダウンロードして解凍する1. Zookeeperの紹介分散サービス フレームワークとして、Zoo...
HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...
この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...
目次1. ジョイントインデックスの故障の条件2. インデックス失敗の条件1. ジョイントインデックス...
この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...
目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...
仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...
何もすることがなかったので、学習用に最も安いAlibaba Cloudサーバーを購入しました。年間3...
目次発見: ディスプレイアニメーションの応用実装:記事の1行目を表示する効果を実現する方法実際、その...
リンク: https://qydev.weixin.qq.com/wiki/index.php?ti...
MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...
Bash 初期化ファイル対話型ログインシェル次の場合にはログイン シェルを取得できます。ローカル端末...