☰

jQueryでテーブル行を追加する 質問する

tag-icon • tag-icon javascript jquery html-table
jQueryでテーブル行を追加する 質問する

jQuery を使用して、テーブルの最後の行として追加の行を追加しています。

私はこのようにしました:

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

このようなテーブルに追加できる内容 (入力、選択、行数など) には制限がありますか? 別の方法はありますか?

ベストアンサー1

あなたが提案するアプローチでは、あなたが求めている結果が得られる保証はありません。たとえば、次のような場合を考えてみましょう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 であれば、上記の例のように複数の行を含め、メソッド内に何でも含めることができます。

更新:この質問に関する最近のアクティビティを受けて、この回答を再検討します。eyelidlessness は、DOM には常に が存在するという適切なコメントをしています。これは事実ですが、少なくとも 1 つの行がある場合に限ります。行がない場合は、自分で指定しない限り はtbody存在しません。tbody

ダコN_示唆するtbody最後の の後にコンテンツを追加するのではなく、に追加しますtr。これにより、行がないという問題は回避されますが、理論的には複数のtbody要素があり、各要素に行が追加される可能性があるため、まだ完全ではありません。

すべてを考慮すると、考えられるすべてのシナリオに対応する単一の 1 行のソリューションが存在するかどうかはわかりません。jQuery コードがマークアップと一致していることを確認する必要があります。

おそらく最も安全な解決策は、行がない場合でも、マークアップにtable常に少なくとも 1 つを含めるようにすることだと思いますtbody。これに基づいて、行がいくつあっても機能する次のコードを使用できます (複数の要素も考慮されますtbody)。

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

おすすめ記事