この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 コードは次のとおりです <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ケース - すべてのテーブルを選択</title> <スタイル> テーブル { 境界線: 1px 実線; マージン: 自動; 幅: 500ピクセル; } td、th { テキスト配置: 中央; 境界線: 1px 実線; } 。外 { 背景色: 白; } 。以上 { 背景色: ピンク; } div{ 上マージン: 10px; テキスト配置: 中央; } </スタイル> <スクリプト> window.onload = 関数(){ //すべて選択 document.getElementById("checkAll").onclick = function () { var cbs = document.getElementsByName("cb"); (var i = 0; i < cbs.length; i++) の場合 { cbs[i].checked = true; } } //すべてチェックを外す document.getElementById("unCheckAll").onclick = function () { var cbs = document.getElementsByName("cb"); (var i = 0; i < cbs.length; i++) の場合 { cbs[i].checked = false; } } //再チェック document.getElementById("reCheck").onclick = function () { var cbs = document.getElementsByName("cb"); (var i = 0; i < cbs.length; i++) の場合 { cbs[i].checked = !cbs[i].checked; } } //マウスが通過すると色が変わります var trs = document.getElementsByTagName("tr"); (var i = 0; i < trs.length; i++) の場合 { trs[i].onmouseover = 関数 () { this.className = "以上"; } trs[i].onmouseout = 関数 () { this.className = "out"; } } //一番上のチェックボックスをオンにしてすべてを選択します document.getElementById("firstCb").onclick = function () { var cbs = document.getElementsByName("cb"); (var i = 0; i < cbs.length; i++) の場合 { cbs[i].checked = this.checked; } } } </スクリプト> </head> <本文> <テーブル> <caption>学生情報フォーム</caption> <tr> <td><input type="checkbox" name="cb" id="firstCb"></td> <td>番号</td> <td>名前</td> <td>性別</td> <td>操作</td> </tr> <tr> <td><入力タイプ="チェックボックス" 名前="cb"></td> <td>1</td> <td>リンフー・チョン</td> <td>男性</td> <td><a href="javascript:void(0);" onclick="delTr(this)">削除</a></td> </tr> <tr> <td><入力タイプ="チェックボックス" 名前="cb"></td> <td>2</td> <td>放して</td> <td>男性</td> <td><a href="javascript:void(0);" onclick="delTr(this)">削除</a></td> </tr> <tr> <td><入力タイプ="チェックボックス" 名前="cb"></td> <td>3</td> <td>岳部群</td> <td>?</td> <td><a href="javascript:void(0);" onclick="delTr(this)">削除</a></td> </tr> </テーブル> <div> <input type="button" value="すべて選択" id="checkAll"> <input type="button" value="すべてチェックを外す" id="unCheckAll"> <input type="button" value="再チェック" id="reCheck"> </div> </本文> </html> 運用結果 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析
metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...
背景<br />フロントエンドを担当する学生は、ページが多すぎると煩雑になるため、開発プ...
目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...
この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...
HTML入門ハイパーテキスト マークアップ言語: ハイパーテキスト マークアップ言語ハイパーテキスト...
まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...
キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...
目次1. デフォルトの焦点はボディにあります2. テキストボックスのフォーカスを手動で取得する3. ...
ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...
目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...
マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...
MySQL をインストールした後、初めてmysql -uroot -pを実行したときに、root パ...
シーンについて話すメールを送信サードパーティのウェブサイトにHTMLを埋め込む他の編集者の記事をコピ...
アプリケーションシナリオ多くの場合、Linux サーバーに tomcat や nginx などのソフ...
ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...