Javascriptの配列やオブジェクトからテーブルを生成する（Pug版あり）

2022年7月20日

配列からテーブルを生成する

Javascriptの配列やオブジェクト（連想配列）からテーブルを作る機会がありました。あとあと使いそうなので、そのメモを残します。

たぶん、ライブラリもあると思うのですが、任意のクラスやidを付けたり、セルの中身をいろいろとカスタマイズしたいことも多いので、やはり自作の方が便利だったりします。

二重のforループでcreateElementで生成したセルや行をappendChildでtable要素に追加していくだけです。

関数化して、引数は生成先のdivとデータ配列、列数を渡すようにしました。

配列の数が中途半端な場合には空白になるようにしています。

const table_area = document.getElementById("table_area");
generateTable(table_area, array);

function generateTable(_target, _data, _columns = 4) {
  const _table = document.createElement("table");
  const _tbody = document.createElement("tbody");
  let _counter = 0;
  for (i = 0; i < Math.ceil(_data.length / _columns); i++) {
    const _table_row = document.createElement("tr");

    for (let j = 0; j < _columns; j++) {
      const _cell = document.createElement("td");
      if (_data[_counter]) _cell.innerHTML = _data[_counter];
      _counter++;
      _table_row.appendChild(_cell);
    }
    _tbody.appendChild(_table_row);
  }
  _table.appendChild(_tbody);
  _target.appendChild(_table);
}

実際の動作です。

こちらでは生成中にidやClass、Editable属性などを設定しています。　

See the Pen generating table from Array by Ryoji Kimura (@ryjkmr) on CodePen.

オブジェクト（連想配列）から見出し付きの表を生成する

オブジェクト（連想配列）から表を作成する関数も作りました。

Object.keys()でキーを取り出しています。

キー毎に配列の要素数が違っても大丈夫なように作りました。

const data = {
  a: [1, 2, 3],
  b: [4, 5, 6, 7],
  c: [8, 9]
};

const target = document.getElementById("table");
craeteTableFromJson(target,data);

function craeteTableFromJson(_target, _data) {
  const _keys = Object.keys(_data);
  const _num_of_keys = _keys.length;
  let _max_data_length = 1;
  for (let k in _data) {
    if (_data[k].length > _max_data_length) _max_data_length = _data[k].length;
  }
  const _table = document.createElement("table");
  const _thead = document.createElement("thead");
  const _tr = document.createElement("tr");
  for (let i = 0; i < _num_of_keys; i++) {
    const _th = document.createElement("th");
    _th.innerHTML = _keys[i];
    _tr.appendChild(_th);
  }
  _table.appendChild(_tr);

  for (let i = 0; i < _max_data_length; i++) {
    const _trd = document.createElement("tr");
    for (let j = 0; j < _num_of_keys; j++) {
      const _td = document.createElement("td");
      if (_data[_keys[j]][i]) _td.innerHTML = _data[_keys[j]][i];
      _trd.appendChild(_td);
    }
    _table.appendChild(_trd);
  }

  _target.appendChild(_table);
}

See the Pen Untitled by Ryoji Kimura (@ryjkmr) on CodePen.

Pugで書くとシンプルになる

テンプレートエンジンのPugでも書いてみました。

PugではcreatElementやappendChildといったプロセスが要らなくなるのでだいぶシンプルに書けます

配列から表を作る

See the Pen create Table from array (Pug) by Ryoji Kimura (@ryjkmr) on CodePen.

オブジェクト（連想配列）から表を作る

See the Pen Untitled by Ryoji Kimura (@ryjkmr) on CodePen.