1. ホーム
  2. javascript

[解決済み] 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>');