[解決済み] jQueryでテーブルの行を追加する
2022-03-15 05:13:51
質問
テーブルに最終行として追加の行を追加するために、jQueryで最も良い方法は何ですか?
これは許容範囲でしょうか?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
このようなテーブルに追加できるものに制限はありますか(入力、選択、行数など)?
どのように解決するのですか?
あなたが提案するアプローチは、あなたが探している結果を得ることを保証するものではありません。
tbody
例えば
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
となってしまうのです。
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
そこで、私は代わりにこの方法をお勧めします。
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
の中に何でも入れることができます。
after()
メソッドは、有効な HTML である限り、上記の例のように複数行を含むことができます。
更新してください。
この質問に関する最近の活動を受けて、この回答を再検討しています。
tbody
これは正しいのですが、少なくとも 1 つの行がある場合のみです。行がない場合、DOMには
tbody
ただし、自分で指定した場合はこの限りではありません。
DaRKoN_
提案
に追加されます。
tbody
の後にコンテンツを追加するのではなく、最後の
tr
. これは、行を持たないという問題を回避するものですが、それでも、理論的には複数の
tbody
要素に行が追加されます。
すべての可能性を考慮した上で、一行で解決する方法はないと思います。jQueryのコードとマークアップの整合性を確認する必要があります。
最も安全な解決策は、おそらくあなたの
table
は、常に少なくとも1つの
tbody
は、たとえ行がない場合でも、マークアップに含まれます。これに基づいて、以下のようにすれば、行の数に関係なく動作します(また、複数の
tbody
要素)を使用します。
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
関連
-
Vueでルートネスティングを実装する例
-
[解決済み] テスト
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] JavaScriptコンソールにjQueryを含める
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueにシンプルなメモ帳機能を実装
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
JavaScriptのStringに関する共通メソッド
-
jq は html ページとデータを動的に分割する。