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 をよろしくお願いいたします。

以下もご興味があるかもしれません: