jQueryでのテーブルの作り方【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのテーブルの作り方について、簡単に解説していきます。

完成形のHTML

jQueryを使うとテーブルを簡単に作れます。

まずは、完成形のHTMLのイメージを持ちましょう。

<table border="1">
  <tr><td>0行目、0列目</td><td>0行目、1列目</td><td>0行目、2列目</td></tr>
  <tr><td>1行目、0列目</td><td>1行目、1列目</td><td>1行目、2列目</td></tr>
  <tr><td>2行目、0列目</td><td>2行目、1列目</td><td>2行目、2列目</td></tr>
  <tr><td>3行目、0列目</td><td>3行目、1列目</td><td>3行目、2列目</td></tr>
  <tr><td>4行目、0列目</td><td>4行目、1列目</td><td>4行目、2列目</td></tr>
</table>

上記のHTMLでは、5行3列のテーブルを表現しています。

jQuery

上記のテーブルを作るためにjQueryでは繰返処理を行います。

var table = $('<table border="1">');
for (var i = 0; i <= 4; i++) {
  var tr = $('<tr></tr>').appendTo(table);
  for (var j = 0; j <= 2; j++) {
    $('<td>' + i + '行目、' + j + '列目</td>').appendTo(tr);
  }
}
$('body').append(table);

上記のコードでは、5行3列のテーブルを作成するようにカウンタ変数の条件を指定しています。

appendToメソッドを使うことで、後から戻り値を使って、操作することができるため、便利です。

発展:データをテーブル化

発展形として、データをテーブル化してみましょう。

基本的な処理は変わりませんが、データの行列の数だけ繰返処理をすることになります。

var users = [
  {name:'田中', gender:'男性', age:22},
  {name:'山田', gender:'女性', age:25},
  {name:'高橋', gender:'女性', age:30},
  {name:'佐藤', gender:'男性', age:35},
  {name:'小林', gender:'男性', age:40},
];

var table = $('<table border="1">');
$.each(users, function(index, row) {
  var tr = $('<tr></tr>').appendTo(table);
  $.each(row, function(key, value) {
    $('<td>' + value + '</td>').appendTo(tr);
  });
});
$('body').append(table);

上記のコードの例では、eachメソッドを使って、どのようなデータでも対応できるような処理を実装しています。