JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

序文

これは、テーブルを動的に追加する例です。[追加] ボタンをクリックすると、フォームがポップアップ表示され、入力内容をテーブルに追加したり、テーブルの行全体をクリアしたりできます。

実装のアイデア

まずテーブルとフォームを作成し、フォームに入力された内容を動的にテーブルに追加します。フォームページの右上に閉じるボタンがあります。クリックするとフォームページを閉じてテーブルページを表示できます。ページを美しくするために、テーブルの <tfoot></tfoot> にデータを追加するボタンを配置し、動的に生成されたテーブルデータを <tbody><tbody> に追加しました。[追加] ボタンをクリックすると、テーブルが非表示になり、フォームが表示されます。追加する情報をフォームに入力し、入力情報を取得します。jQuery を通じてテーブル内の要素の行を生成し、取得した値を追加します。最後に、この行を <tbody><tbody> の最後の行に追加します。フォームページの [追加] ボタンをクリックすると、フォームが非表示になり、変更された内容が表示されます。動的な削除機能も必要なため、テーブル内の各行要素に削除属性 (ハイパーリンク) を追加する必要があります。[削除] をクリックすると、対応する行が取得され、削除操作が実行されます。

実装コード

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
        テーブル {
            幅: 410ピクセル;
            マージン: 100px 自動 0;
            テキスト配置: 中央;
            境界線の折りたたみ: 折りたたみ;
            境界線の間隔: 0;
            境界線: 1px 実線 #ccc;
        }
        番目、
        td {
            幅:150ピクセル;
            高さ: 40px;
            境界線: 1px 実線 #ccc;
            パディング: 10px;
        }

        {
            テキスト装飾: なし;
        }
        .btn追加{
            幅: 110ピクセル;
            高さ: 30px;
            フォントサイズ: 20px;
        }
        。アイテム {
            位置: 相対的;
            左パディング: 100px;
            右パディング: 20px;
            下部マージン: 34px;
        }

        。ポンド {
            位置: 絶対;
            左: 0;
            上: 0;
            表示: ブロック;
            幅: 100ピクセル;
            テキスト配置: 右;
        }

       。TXT {
            幅: 300ピクセル;
            高さ: 32px;
        }
        .form-add {
            位置: 絶対;
            上: 100px;
            左: 578ピクセル;
            境界線: 1px 実線 #ccc;
            左マージン: -197px;
            パディング下部: 20px;
            表示: なし;
        }
        。タイトル {
            背景色: #f7f7f7;
            境界線の幅: 1px 1px 0 1px;
            下境界線: 0;
            下部マージン: 15px;
            位置: 相対的;
        }

        スパン {
            幅: 自動;
            高さ: 18px;
            フォントサイズ: 16px;
            色: rgb(102, 102, 102);
            テキストインデント: 12px;
            パディング: 8px 0px 10px;
            右マージン: 10px;
            表示: ブロック;
            オーバーフロー: 非表示;
            テキスト配置: 左;
        }

        .title div {
            幅: 16px;
            高さ: 20px;
            位置: 絶対;
            右: 10px;
            上: 6px;
            フォントサイズ: 30px;
            行の高さ: 16px;
            カーソル: ポインタ;
        }

        。提出する {
            テキスト配置: 中央;
        }

        .submit入力{
            幅: 170ピクセル;
            高さ: 32px;
        }
    </スタイル>

</head>
<本文>
    <!--ボタンとフォーム-->
        <テーブル>
            <頭>
            <tr>
                <th>クラス</th>
                <th>名前</th>
                <th>学生番号</th>
                <th>オペレーション</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
                <td>クラス 1</td>
                <td>シャオ・ワン</td>
                <td>001</td>
                <td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">削除</a></td>
            </tr>
            <tr>
                <td>クラス 2</td>
                <td>リトルベア</td>
                <td>002</td>
                <td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">削除</a></td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td id="j_btnAddData" class="btnAdd" colspan="4">データを追加</td>
                </tr>
            </tfoot>
        </テーブル>
    <!--データを追加するフォーム-->
    <div id="j_formAdd" class="form-add">
        <div class="title">
            <span>データを追加する</span>
            <div id="j_hideFormAdd">×</div>
        </div>
        <div class="item">
            <label class="lb" for="">クラス:</label>
            <input class="txt" type="text" id="classes" placeholder="クラスを入力してください">
        </div>
        <div class="item">
            <label class="lb" for="">名前:</label>
            <input class="txt" type="text" id="uname" placeholder="お名前を入力してください">
        </div>
        <div class="item">
            <label class="lb" for="">学生ID:</label>
            <input class="txt" type="text" id="order" placeholder="学生番号を入力してください">
        </div>
        <div class="送信">
            <input type="button" value="追加" id="j_btn追加">
        </div>
    </div>
</本文>
</html>

<script src="jquery.js"></script>
<スクリプト>
    $(関数() {
        $('#j_btnAddData').click(関数() {
            $('#j_formAdd').表示();
            $('テーブル').非表示()
        });
        $('#j_hideFormAdd').click(function() {
            $('#j_formAdd').非表示();
            $('テーブル').表示()
        });
        $('#j_btnAdd').click(関数() {
            $('テーブル').表示()
            $('#j_formAdd').非表示();
            var クラス = $('#classes').val(); 
            var uname = $('#uname').val(); 
            var order = $('#order').val(); 
    
            var New =$('<tr>' +
                            '<td>'+クラス+'</td>'+
                            '<td>'+uname+'</td>' +
                            '<td>'+order+'</td>' +
                            '<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">削除</a></td>' +
                         '</tr>' );

            $('#j_tb').append(新規);
        });
        $('#j_tb').on('クリック','.get', 関数() {
            $(this).parent().parent().remove();
        });
    });
</スクリプト> 

成果を達成する

JavaScript を使って動的にテーブルを生成するケースの詳細な説明はこれで終わりです。JavaScript を使って動的にテーブルを生成するケースのより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript を使用して動的に生成されるテーブルの詳細な説明
  • 動的なテーブル効果を実現するJavaScript
  • シンプルな動的テーブルを実装するJavaScript
  • Web ページ上でテーブルを動的に生成する JavaScript
  • JavaScript で動的にテーブルを生成する例
  • 動的にテーブルを生成するJavaScript
  • JSテーブルの動的操作の完全な例

<<:  アダプティブ Web デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)

>>:  CSS 複合セレクタの具体的な使用法

推薦する

Dockerfile における ENTRYPOINT と CMD の違い

Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...

Vueコンポーネント化の基本的な使用方法の詳細

目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例サーバー開発を行う際には、...

ウェブデザインと制作におけるハイパーリンクの効果の向上

ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このよう...

Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)

今日、PHP で作業しているときに、Xampp サーバーに付属の mysql データベースを使用する...

フォームから Vue ElementUI を使用してログイン効果を実装する例

目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...

ウェブサイトのコンテンツの一部を傍受するための iframe を実装するためのアイデアとコード

コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...

理論の普及——ユーザーエクスペリエンス

1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...

JavaScript で右クリック メニューを統合する layim のサンプル コード

目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...

本をめくる効果を実現するネイティブJS

この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...

HTML 5 スタイルシートのリセット

この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...

インスタンス化されたオブジェクトパラメータによるMySQLクエリ例の説明

この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...

JavaScript ベースのランダム点呼システムの実装

この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに...

CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...

Linux でファイルの種類を理解して識別する方法

序文ご存知のとおり、Linux ではハードディスクやグラフィック カードなどすべてがファイルです。 ...