jQueryで行を追加する方法

JQuery は無料のオープンソース JavaScript ライブラリであり、JQuery を使用して DOM 操作、イベント ハンドラー、アニメーション効果、Ajax などの一般的なタスクを簡単に実行できます。 Web 開発では、行を追加してテーブルやリストなどのページ要素を動的に更新することが必要になることがよくあります。以下では、JQuery が行を追加する方法を説明します。

1. テーブルに行を追加する

HTML では、<table> タグを使用してテーブルを作成できます。テーブルに行を追加するには、まず JQuery を使用してテーブル内の <tbody> 要素を選択し、次に append()## を使用してそこに新しい行を追加する必要があります。 ＃ 方法。サンプル コードは次のとおりです。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<script>
  // 获取 tbody 元素
  var tbody = $('table .table-body');
  
  // 创建一个新行
  var newRow = $('<tr><td>王五</td><td>22</td><td>男</td></tr>');
  
  // 将新行添加到 tbody 中
  tbody.append(newRow);
</script>

上記のコードでは、まず

$() メソッドを使用してテーブル内の <tbody> 要素を取得します。 $('...') 新しい行を作成し、その新しい行を tbody に追加します。複数の行を追加する場合は、複数の行を配列に追加し、append() を使用してそれらをすべて一度に追加できることに注意してください。

2. リストに行を追加します

HTML では、

または
タグを使用して、連続リストまたは順序付きリスト。リストに行を追加するには、append() メソッドを使用して新しい
1. 要素をリストに追加します。サンプル コードは次のとおりです。

   <ul class="list">
     <li>苹果</li>
     <li>香蕉</li>
     <li>橙子</li>
   </ul>
   
   <script>
     // 获取列表元素
     var list = $('ul.list');
     
     // 创建一个新的 li 元素
     var newItem = $('<li>梨子</li>');
     
     // 将新元素添加到列表中
     list.append(newItem);
   </script>

   上記のコードでは、まず

   $() メソッドを使用してリスト要素を取得し、次に $('< li>.. .

') 新しい
2. 要素を作成し、新しい要素をリストに追加します。
   3. 概要
   この記事の導入部を通じて、JQuery を使用してテーブルまたはリストに行を追加する方法を学びました。 JQuery を使用して DOM 要素を操作すると、非常に便利かつ高速であり、Web 開発の効率が大幅に向上することがわかります。まだJQueryを試したことがない方は、公式サイトからダウンロードして学習するとかなり便利になると思います。

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