【HTML/Javascript】TableをJavascriptで動的に生成する方法

2022/05/16 2022/07/18

前回作ったTableをJavascriptで動的に生成するようにしました。

【HTML】CSSだけでExcelのような入力できるテーブルを作る方法（contentEditable属性）

HTMLではcontentEditable属性でコンテンツを編集可能にする機能があり、これを使うことで↓この動画のようにExcelのようなテーブルを作ることができます。 TDタグにcontenteditable=trueを追加すればOKです。<table><tr class="header"> <th class="item1"> </th> <th class="item2">A</th> <th class="item2">B</th> <th class="item2">C</th> <th class="item2">D</th> <...

完成形はこんな感じです。前回記事のようにセル入力できるようにしています。なのでExcelっぽい外観にしました。カラムはA〜Z、行数は20行としていますが、動的に生成しているのでいくらでも調整することができます。

HTMLはこのタグだけでOKです。あとはJavascript側で作るので。

<table></table>

Excel風にするためのスタイルシートはこちらです。

 table {
  border-collapse: collapse;
  table-layout: fixed;
}
th {
  border: 1px solid grey;
  padding: 3px 10px;
  background: #ddd;
  font-weight: bold;
  text-align: center;
}
.item {
  border: 1px solid grey;
  padding: 3px 10px;
  background: #ddd;
  font-weight: bold;
  text-align: center;
}
.value {
  border: 1px solid grey;
  padding: 3px 10px;
  cursor: pointer;
  width: 100px;
}

Javascript側のソースコードです。カラム名は最初に配列で持つようにしました。これをかえれば列数が変わります。

var header = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 
              'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 
              'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

var table = document.querySelector("table");

//ヘッダー（TH）
var row = table.insertRow(-1);
var th0 = document.createElement("th");
row.appendChild(th0);
th0.innerHTML=" ";
th0.width = 30;
for(var i=0; i<header.length; i++){
  var th = document.createElement("th");
  row.appendChild(th);
  th.innerHTML=header[i];
  th.width = 100;
}
table.width = 30 + 100*header.length;

//データ行（TR）
for(var r=1; r<=20; r++){
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(-1);
  cell1.className = 'item';
  cell1.innerHTML = r;
  for(c=1; c<=header.length; c++){
    var cell = row.insertCell(-1);
    cell.className = 'value';
    cell.setAttribute('contenteditable','true');
    cell.setAttribute('id','R'+r+'C'+c);
  }
}

■これが完成形■

非IT企業に勤める中年サラリーマンのIT日記