jQuery は、フロントエンド開発でよく使用される JavaScript ライブラリとして、DOM 操作において高い実用性と利便性を備えています。その中でもHTML要素の動的追加はjQueryの一般的な操作の一つであり、特にテーブルを操作する場合には要素の動的追加は欠かせません。

jQuery では要素を追加する方法が多数ありますが、一般的な方法をいくつか紹介しますので参考にしてください。

1. append() メソッドを使用する

append() メソッドは、指定された HTML コードまたは要素を既存の要素の末尾に追加できます。したがって、append() メソッドを使用して要素を

に追加できます。サンプルコードは次のとおりです:

$(document).ready(function(){
   $("button").click(function(){
      $("table").append("<tr><td>新行的单元格 1</td><td>新行的单元格 2</td></tr>");
   });
});

ログイン後にコピー

サンプルコードでは、ボタンがクリックされると、新しい要素がテーブルに追加されます。

要素。

2. eq() メソッドを使用して動的に行を追加します

eq() メソッドは、一致する要素コレクション内の指定されたインデックス位置にある要素を選択できます。したがって、まず指定された

要素を取得し、次に eq() メソッドを使用してそれをコピーし、テーブルに挿入します。サンプルコードは次のとおりです。最初の要素がコピーされ、テーブルに挿入されます。

3. after() メソッドを使用して行を追加する

after() メソッドは、指定した HTML コードまたは要素を指定した要素の後に挿入できます。したがって、新しい

要素をテーブル内の指定された位置に挿入できます。サンプルコードは次のとおりです:

$(document).ready(function(){
   $("button").click(function(){
      var $cloneRow=$("table tr").eq(0).clone();
      $("table").append($cloneRow);
   });
});

ログイン後にコピー

サンプルコードでは、新しい

要素をテーブル内の指定された位置に挿入します。指定された位置のテーブル (最初の要素の後)。

4. appendTo() メソッドを使用して行を追加する

appendTo() メソッドは、指定された要素を別の指定された要素の内部終了位置に挿入できます。したがって、最初に新しい

要素を作成してドキュメントに挿入し、次に appendTo() メソッドを使用してそれをテーブルに挿入できます。サンプルコードは次のとおりです。サンプルコードでは、まず新しい要素を作成し、それをテーブルに挿入します。

実際の開発では、特定のニーズに応じてさまざまな方法を選択して、

要素を追加する操作を実装します。どの方法を使用する場合でも、jQuery の柔軟性と利便性を利用して、HTML ドキュメントを動的に変更および拡張できます。同時に、ページ全体の美しさを確保するために要素を動的に追加する場合は、要素の属性とスタイルを適切に設定することにも注意を払う必要があります。

以上がjqueryはtr要素を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：jqueryでスクロールビューを使用する方法次の記事：ie8 jquery getはサポートされていません

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

NullPointerException とは何ですか?どのように修正すればよいですか?

2024-10-22 09:46:29
初心者からプログラマーへ: 旅は C の基礎から始まります

2024-10-13 13:53:41
PHP による Web 開発のロックを解除する: 初心者ガイド

2024-10-12 12:15:51
C の謎を解く: 新人プログラマーのための明確でシンプルな道

2024-10-11 22:47:31
コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング

2024-10-11 19:36:51
内なるプログラマーを解き放つ: まったくの初心者のための C

2024-10-11 15:50:41
C で生活を自動化する: 初心者向けのスクリプトとツール

2024-10-11 15:07:41
PHP を簡単に: Web 開発の最初のステップ

2024-10-11 14:21:21
Python で何でも構築: 創造性を解き放つための初心者ガイド

2024-10-11 12:59:11
コーディングの鍵: 初心者のための Python の力を解き放つ

2024-10-11 12:17:31