jqueryはテーブルに行を追加します

jQuery は、JavaScript プログラミングを大幅に簡素化できる効率的で簡潔な JavaScript ライブラリです。 Web 開発者にとって、新しい行を追加して HTML テーブル (Table) を拡張する必要があることがよくありますが、jQuery を使用してテーブルに行を追加するにはどうすればよいでしょうか?次に、jQuery を使用してテーブルに行を追加する方法を学びましょう。

1. HTML でのテーブルの定義

まず、HTML ページ上で必要なテーブルを定義します。以下に示すように:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>23</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>

2. 新しい行の追加

次に、jQuery に新しい行を追加します。 td 要素を含む tr 要素を作成することで、新しい行を追加できます。以下に示すように:

$(document).ready(function(){
  $('#addRowBtn').click(function(){
    $('#myTable tbody').append('<tr><td>赵六</td><td>26</td><td>教师</td></tr>');
  });
});

ここでは、jQuery セレクターを使用してテーブルの tbody を選択し、append 関数を呼び出して新しい行を tbody に追加します。追加された行は、それぞれに値が含まれる 3 つのセルを含む tr 要素です。 jQuery を使用してテーブルに行を追加したことがわかります。

3. ループを通じて複数の行を追加する

場合によっては、ループを通じてテーブルに複数の行を追加する必要があります。 JavaScript ループを使用して複数の行を追加できます。以下に示すように:

$(document).ready(function(){
  $('#addRowsBtn').click(function(){
    for(var i = 0; i < 10; i++){
      $('#myTable tbody').append('<tr><td>姓名' + i + '</td><td>年龄' + i + '</td><td>职业' + i + '</td></tr>');
    }
  });
});

ここでは、for ループを使用して 10 回ループし、毎回 append 関数を通じて tbody に行を追加します。文字列の連結を使用して各セルの値を定義し、変数 i を使用して各セルの値を一意にすることができます。

4. 指定した位置に行を挿入する

テーブル内の特定の位置に新しい行を追加する必要がある場合があります。このとき、新しい行を挿入する特定の場所を指定する必要があります。以下に示すように:

$(document).ready(function(){
  $('#addAtBtn').click(function(){
    var newRow = '<tr><td>张七</td><td>22</td><td>运动员</td></tr>';
    var targetRow = $('#myTable tbody tr:eq(2)');
    if(targetRow.length > 0){
      targetRow.before(newRow);
    }
  });
});

ここでは、新しい行 newRow を定義し、セレクターを通じてテーブルの 2 行目の targetRow を選択します。

次に、before 関数を使用して、targetRow の前に新しい行を追加します。

targetRow が存在しない場合、新しい行は挿入されないことに注意してください。 2 行目の後に行を追加する場合は、before 関数の代わりに after 関数を使用できます。

概要

上記は、jQuery を使用してテーブルに行を追加する 3 つの方法です。 append 関数を使用して新しい行を追加したり、ループを使用して複数の行を追加したり、特定の位置に新しい行を挿入したりできます。 jQuery を使用すると、HTML テーブルを迅速かつ簡単に拡張でき、Web サイトをより強力で完全なものにすることができます。

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