この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 効果: 1. 「追加」ボタンをクリックしてテーブルに行を追加し、「すべて選択」の前のチェックボックスを「false」に変更します。 1.1. 新しく追加されたチェックボックスとクリックイベント 2. 削除ボタンをクリックして、テーブル本体の選択された行を取得し、tr全体を削除し、すべて選択の前のチェックボックスをfalseに変更します。 最初の td のチェックボックスの状態は true にチェックされています。 3. [すべて選択] ボタンの前のチェックボックスをクリックします。 選択されている場合は、その下のチェックボックスがすべて選択されます。 選択されていない場合は、その下のチェックボックスがすべて選択解除されます。 4. 各テーブル本体のチェックボックスをクリックします。すべてのチェックボックスが選択されている場合は、[すべて選択] ボタンが選択されます。1 つも選択されていない場合は、[すべて選択] ボタンは選択されません。 CS: ... <スタイル> 。頭 { 幅: 500ピクセル; パディング: 8px; マージン: 20px 自動; ボックスのサイズ: 境界線ボックス; 境界線: 1px 実線 #eee; } 入力{ 左マージン: 3px; アウトライン: なし; } ボタン { フロート: 右; } テーブル { 幅: 500ピクセル; 境界線: 1px実線 #000; マージン: 0 自動; 境界線の折りたたみ: 折りたたみ; } tr、 td、 番目 { 境界線: 1px実線 #000; } tr td:n番目の子(1) { テキスト配置: 中央; } 。足 { 幅: 500ピクセル; マージン: 8px 自動; パディング: 8px; ボックスのサイズ: 境界線ボックス; } .foot ボタン { フロート: 右; } td:n番目の子(2)、 td:n番目の子(3)、 td:n番目の子(4) { 幅: 20%; } </スタイル> html: <div class="head"> <span>名前を入力してください:</span><input type="text"><br> <span>性別を入力してください:</span><input type="radio" name="sex" selected>男性<input type="radio" name="sex">女性<br> <span>年齢を入力してください:</span><input type="text"><button>表に追加</button> </div> <テーブル> <頭> <th><input type="checkbox"> すべて選択</th> <th>名前</th> <th>性別</th> <th>年齢</th> </thead> <t本文> <tr クラス="tr1"> <td><入力タイプ="チェックボックス"></td> <td>張三</td> <td>女性</td> <td>88</td> </tr> <tr> <td><入力タイプ="チェックボックス"></td> <td>李思</td> <td>男性</td> <td>18</td> </tr> <tr> <td><入力タイプ="チェックボックス"></td> <td>王武</td> <td>女性</td> <td>12</td> </tr> </tbody> </テーブル> <div class="foot"><button>選択した行を削除</button></div> ジャバスクリプト: // イベント三部作 // 1. 要素ボタンテーブル tBody チェックボックス inp を取得する var btns = document.querySelectorAll('ボタン'); var テーブル = document.querySelector('テーブル'); var inps = document.querySelectorAll('input'); var all = table.tHead.querySelector('input'); var cks = table.tBodies[0].getElementsByTagName('input'); var cks1 = table.tBodies[0].querySelectorAll('input'); // console.log(btns、table、inps、cks); // console.log(cks, all); コンソールにログ出力します。 // 2. 追加ボタンをクリックする btns[0].onclick = function(){ // 3. テーブルに行を追加します。 var tr = document.createElement('tr'); // 4. tbodyにtrを追加する テーブル.tBodies[0].appendChild(tr); // 5. tdを作成する var inp = document.createElement('td'); inp.innerHTML = '<input type="checkbox">'; tr.appendChild(inp); var user = document.createElement('td'); user.innerHTML = inps[0].value; tr.appendChild(ユーザー); var 性別 = document.createElement('td'); sex.innerHTML = inps[1].checked ? '男' : '女'; tr.appendChild(性別); var age = document.createElement('td'); age.innerHTML = inps[3].value; tr.appendChild(年齢); // 6. 「すべて選択」の前のチェックボックスがfalseになる すべてチェック済み = false; // 新しく追加されたチェックボックスとクリックイベント var bck = tr.querySelector('input'); コンソールログ(bck); bck.onclick = 関数(){ 自動(); } } // 7. 削除ボタンをクリックして選択した行を削除します btns[1].onclick = function(){ // 8. テーブル本体で選択された行を取得します // console.log(cks, cks1); // 9. チェックボックスが選択されているかどうかを判定する for(var i = 0; i < cks.length; i++){ コンソールログ(cks); if(cks[i].checked){ // console.log(cks[i].parentNode.parentNode); // コンソールログ(cks); // 10. 行全体を削除します cks[i].parentNode.parentNode.remove(); 私 - ; } } // 11. 「すべて選択」の前のチェックボックスをfalseに変更します すべてチェック済み = false; } // すべて選択ボタンの前のチェックボックスをクリックします。選択されている場合は、その下のチェックボックスがすべて選択されます。選択されていない場合は、その下のチェックボックスがすべてオフになります。// 12. すべてをクリックします all.onclick = 関数(){ console.log(すべてチェック済み); // 13. 各for(var i = 0; i < cks.length;i++){ cks[i].checked = all.checked; } } // テーブル本体の各チェックボックスをクリックします。すべてのチェックボックスが選択されている場合は、[すべて選択] ボタンが選択されます。1 つも選択されていない場合は、[すべて選択] ボタンは選択解除されます for(var j = 0; j < cks.length; j++){ // クリック cks[j].onclick = function(){ // すべて // for(var i = 0; i < cks.length; i++){ // console.log(cks[i].checked); // // いずれかが選択されていない場合、すべて選択ボタンはチェックされません // if (cks[i].checked == false) { // // すべて選択ボタンはチェックされていません // all.checked = false; // // 関数全体を終了します // return; // } // } // // すべてチェックされています // all.checked = true; 自動(); } } 関数auto() { // すべて for(var i = 0; i < cks.length; i++){ console.log(cks[i].checked); // いずれかが選択されていない場合、すべて選択ボタンはチェックされません if(cks[i].checked == false){ // すべて選択ボタンのチェックが外れています all.checked = false; // 関数全体を終了します return; } } // すべて選択されています all.checked = true; } 効果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: さまざまなMySQLインデックスの使用方法の詳細な説明
>>: CentOS SVN サーバーで複数のプロジェクトを管理する方法
目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...
目次例方法1: 削除方法2: 分解補充する要約するThinking シリーズは、10 分で実用的なプ...
デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...
以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...
1. 2つのクエリエンジン(myIsamエンジン)のクエリ速度InnoDB はテーブル内の特定の行数...
html <div class="スピナー"></div&g...
この記事の目的は、これらの概念とその機能の関係を明らかにすることです。 Mysql がトランザクショ...
多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...
多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...
システムをリセットした後、かなり前にインストールした MySQL データベースのコンソール クエリで...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...
仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...
この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...
<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...