序文これは、テーブルを動的に追加する例です。[追加] ボタンをクリックすると、フォームがポップアップ表示され、入力内容をテーブルに追加したり、テーブルの行全体をクリアしたりできます。 実装のアイデアまずテーブルとフォームを作成し、フォームに入力された内容を動的にテーブルに追加します。フォームページの右上に閉じるボタンがあります。クリックするとフォームページを閉じてテーブルページを表示できます。ページを美しくするために、テーブルの <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 デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)
目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...
昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...
以前、モバイル適応に関する記事を書きました。非常に長く、内容が多すぎて読みづらいものでした。そこで、...
目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...
データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...
目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...
説明: ブロック要素に表示されるテキストの行数を制限します。 -webkit-line-clamp ...
中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router...
目次1. リソースのダウンロード2. ソフトウェアを解凍する2.1 場所を選択する2.2 名前を変更...
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...
サービス.xml Server.xml 構成ファイルは、コンテナー全体を構成するために使用されます。...
この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...
目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...
目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...