この記事では、全選択または選択を反転する機能を実現するための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つのテーブルに異なるデータがあるかどうかを比較する方法の分析
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...
ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...
長い間ウェブサイトを作ってきましたが、入力時のnameとidの違いがまだわかりません。最近jQuer...
目次解決策1: レプリカを再構築する前提条件アドバンテージ欠点手順マスター奴隷解決策2: データ修復...
この記事では、ビデオタグを使用してビデオ再生を実装するVueの具体的なコードを参考までに共有します。...
この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...
6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
目次1. マルチインスタンスとは2. 複数インスタンスのインストールの準備3. MYSQLの複数イン...
目次結果を一目で見るハート効果デジタルスクロールアニメーションアニメーションのように結果を一目で見る...
目次質問:プロジェクトには 2 つのトークンがあり、1 つは有効期間が 2 時間 (ショート トーク...
この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...
はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...
目次フロントエンドルーティングとは何ですか?フロントエンドルーティングを実装するにはどうすればいいで...