jqueryでテーブルに行を追加する方法

今日は、jQuery を使用してテーブルに行を追加する方法について説明します。 Web 開発者であれば、ページ上にデータを表示することが重要であることを知っておく必要があります。表はデータを表現するのに非常に優れた方法です。テーブルを使用してデータを表示するには、jQuery を使用して動的に行を追加する方法を知っておく必要があります。

jQuery を使用してテーブルに行を追加する方法を見てみましょう。

最初のステップは、テーブル オブジェクトを取得することです。すでにテーブル オブジェクトがある場合は、jQuery で次のコード行を使用するだけでそれを取得できます:

var table = $('table');

テーブル オブジェクトがない場合は、次のコード行を使用する必要があります。テーブル オブジェクトを作成するには :

var table = $('<table></table>');

2 番目のステップは、行オブジェクトを作成することです。行オブジェクトを作成するには、次のコード行を使用する必要があります。

var row = $('<tr></tr>');

3 番目のステップは、セル オブジェクトを作成することです。行にセルを追加するには、次のコード行を使用する必要があります。

var cell = $('<td></td>');

4 番目のステップは、セル オブジェクトを行オブジェクトに追加することです。

row.append(cell);

5 番目のステップは、行オブジェクトをテーブル オブジェクトに追加することです。

table.append(row);

これで、テーブルへのセル行の追加が完了しました。

ただし、実際のアプリケーションでは、テーブルの各行に複数のセルを追加する必要があり、各セルに異なるデータとスタイルが含まれる可能性があります。この場合、ループ (for ループ) を使用する必要があります。完全なテーブルを構築します。次に、完全なコードを見てみましょう:

var data = [
    {name: 'John', age: 30},
    {name: 'Jane', age: 28},
    {name: 'Bob', age: 35},
    {name: 'Mary', age: 29}
];

var table = $('<table></table>');
    
for(var i = 0; i < data.length; i++){
    var row = $('<tr></tr>');
    var name = $('').text(data[i].name);
    var age = $('').text(data[i].age);
        
    row.append(name).append(age);
    table.append(row);    
}

$('#tableWrapper').empty().append(table);

このコードは、for ループを使用してデータ リストを走査し、text() メソッドを使用してセルにテキストを追加します。最後に、empty() メソッドを使用して #tableWrapper 要素の内容をクリアし、append() メソッドを使用してテーブル オブジェクトを追加し、テーブル table 全体の構築が完了します。

概要:

この記事では、jQuery を使用して単一行および複数行をテーブルに追加する方法を学びました。これは、特に動的データをページに追加する必要がある場合に、非常に便利なテクニックです。 jQuery テーブルに行を追加する方法をマスターしたので、実際に試してみましょう。

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