jQuery を使用してテーブルに行を追加する方法を簡単に学びます

jQuery は、Web 開発を簡素化するために広く使用されている人気のある JavaScript ライブラリです。 Web ページで jQuery を使用すると、コードがより簡潔になり、保守が容易になり、多くの複雑な機能を実現できます。この記事では、jQuery を使用してテーブルに行をすばやく追加し、テーブル データの追加を簡単に処理できるようにする方法を説明します。

まず、jQuery の基本構文と、jQuery ライブラリを Web ページに導入する方法をすでに理解していることを前提としています。 jQuery にまだ慣れていない場合は、この例を試す前にいくつかの基本を学習してください。

次に、特定のケースを使用して、jQuery を使用してテーブルに行を追加する方法を示します。以下に示すように、名前と年齢という 2 つの列のデータを含む単純なテーブルがあるとします。ボタン。まず、ページにボタンを追加します。ボタンがクリックされると、行を追加する操作がトリガーされます。コードは次のとおりです。

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

次に、jQuery を使用して行を追加する機能を実装します。まず、jQuery ライブラリをページに導入します:

<button id="addRowBtn">添加行</button>

次に、ページの下部に jQuery コードを追加して、行を追加する関数を実装します:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

上記のコードでは、 # を使用します。 ##$('# addRowBtn')

を使用してボタン要素を選択し、

.click() メソッドを使用してボタンにクリック イベントを追加します。ボタンをクリックすると、コールバック関数が実行され、関数内で $('#myTable') を使用してテーブルを選択し、その後、.append() メソッドを使用してテーブルを追加します。テーブル #<tr> 要素の最後に新しい行 ## を追加し、そこにデータを入力します。 <code>これで、ブラウザでページを開いてボタンをクリックすると、テーブルに新しいデータ行が追加されたことがわかります。このようにして、jQuery を使用してテーブルに行を追加します。 一般に、jQuery を使用してテーブルに行を追加するには、数行の簡単なコードのみが必要です。 jQuery のセレクターと操作メソッドにより、DOM 要素の処理が非常に便利かつ効率的になり、Web ページ内のさまざまな要素を簡単に操作できるようになります。この例があなたのお役に立てば幸いです。また、jQuery やその他のフロントエンド テクノロジを学び続けてスキルを継続的に向上できることを願っています。

以上がjQuery を使用してテーブルに行を追加する方法を簡単に学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。