序文これは、テーブルを動的に追加する例です。[追加] ボタンをクリックすると、フォームがポップアップ表示され、入力内容をテーブルに追加したり、テーブルの行全体をクリアしたりできます。 実装のアイデアまずテーブルとフォームを作成し、フォームに入力された内容を動的にテーブルに追加します。フォームページの右上に閉じるボタンがあります。クリックするとフォームページを閉じてテーブルページを表示できます。ページを美しくするために、テーブルの <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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: アダプティブ Web デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)
Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...
目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...
MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例サーバー開発を行う際には、...
ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このよう...
今日、PHP で作業しているときに、Xampp サーバーに付属の mysql データベースを使用する...
目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...
コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...
1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...
目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...
この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...
この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...
この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...
この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに...
この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...
序文ご存知のとおり、Linux ではハードディスクやグラフィック カードなどすべてがファイルです。 ...