テーブルの追加と削除の操作を実装する js

テーブルの追加と削除の操作を実装する js

この記事の例では、テーブルを追加および削除するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsはテーブルの追加と削除の操作を動的に実装します
  • angularJs テーブルの追加、削除、変更、クエリメソッド
  • jsはテーブルを1行ずつ動的に追加し、サンプルコードの値を追加、削除、トラバースします。
  • JavaScript に基づいてテーブル行を動的に追加および削除する
  • ネイティブ JS と JQuery を使用してテーブル行を動的に追加および削除する方法
  • js シンプルなテーブル行の追加と削除の操作例
  • テーブル行を動的に追加および削除するための js 実装コード
  • JS 小さな関数 (テーブル操作 - テーブルとデータを動的に追加および削除) 実装コード
  • JavaScript 動的操作テーブルの例 (行、列、セルの追加、削除)
  • 行を動的に追加、削除し、onkeyup テーブルの合計例を実行する js

<<:  さまざまなMySQLインデックスの使用方法の詳細な説明

>>:  CentOS SVN サーバーで複数のプロジェクトを管理する方法

推薦する

Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作

序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...

Vue nextTickの原理の分析

目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...

MySQLでANDとORを組み合わせる問題を解決する

以下のように表示されます。 SELECT prod_name,prod_price FROM pro...

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

Ubuntu 18.04にMySQL 5.7をインストールする

この記事は MySQL 公式サイトを参考にしてまとめたものであり、遭遇したいくつかの問題も記録されて...

NGINXがウェブサイトのPV、UV、独立IPをカウントする方法の詳細な説明

Nginx: PV、UV、独立IPウェブサイトを作成する人なら誰でも、ウェブサイトのPV、UV、その...

最も完全な 50 の MySQL データベース クエリ演習

このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...

Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決

目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...

MySQLのGROUP BYステートメントを最適化する方法

MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...

React プロジェクトで eslint の Baidu スタイルを使用する詳細な説明

1. Baidu Eslint Ruleプラグインをインストールする npm i -D eslint...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...