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 複合セレクタの具体的な使用法

推薦する

JavaScript スロットリングとアンチシェイクに関する簡単な説明

目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...

エラー 1045 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されました (パスワード使用: YES) 実用的な解決策

昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...

Remレイアウトを使用して適応性を実現する

以前、モバイル適応に関する記事を書きました。非常に長く、内容が多すぎて読みづらいものでした。そこで、...

mysqld_multi を使用して単一のマシンに複数のインスタンスをデプロイする方法に関する MySQL チュートリアル

目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

CSS3プロパティline-clampはテキスト行の使用を制御します

説明: ブロック要素に表示されるテキストの行数を制限します。 -webkit-line-clamp ...

Vue ルーター vue-router 詳細説明ガイド

中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router...

MySQL 8.0.22 解凍版インストールチュートリアル(初心者向け)

目次1. リソースのダウンロード2. ソフトウェアを解凍する2.1 場所を選択する2.2 名前を変更...

Nginx+Apache の動的および静的分離の導入の詳細な例

Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...

優れたWebフォームデザイン事例20選

ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...

Tomcat の構成と最適化ソリューションの詳細な説明

サービス.xml Server.xml 構成ファイルは、コンテナー全体を構成するために使用されます。...

Vueはドラッグアンドドロップまたはクリックで写真をアップロードする機能を実装しています

この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...

Vueは遅延読み込みによりページの応答速度を向上

目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...

JavaScript のデシェイクとスロットリングの例

目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...