もう一つの表<table>の描き方

表の描画はinsertRowやinsertCellを使わずに以下のようにもできます。Model、View、Controllerを考えるともう少し工夫が必要ですが、こんな事もできるという意味で紹介します。ただし、Mac OS X上のSafari 5とFirefox 3.6.3でしか動作確認していません。ご注意ください。

createElementはJavaScriptでHTMLを生成する時に良く使用される方法ですが、当然<table>でも利用できます。また、この方法であれば<th>を直接生成できます。この例では先頭行で<th>を使用してその後に<td>を置いています。

また、ここでは表の定義に配列を使用しています。for( i in fooArray )を使って行を生成していますので、testTable関数に行数と表のタイトルとセル幅を与えるだけで作表します。CSSの設定はclassName、その他の各行やセルの設定はsetAttributeが使えます。たとえば、setAttribute('contenteditable', true)とすれば、表の中身を書き換えられるようになります。さらに、addEventListenerでイベント駆動もできます。

window.onload = function(){
 argTable = {
  numberRow: 5,
  myMenue: {
   "key": 35,
   "input date": 100,
   "item name": 200,
   "item number": 100
  }
 }
 myTable = new testTable(argTable);
 delete argTable
}

function testTable(arg) {
 var myTable = document.createElement('table');
 myTable.setAttribute('border', '1');
 var myTr = document.createElement('tr');
 for (var index in arg.myMenue) {
  var myTh = document.createElement('th');
  myTh.innerHTML = index;
  myTh.setAttribute('width', arg.myMenue[index]);
  myTr.appendChild(myTh);
 }
 myTable.appendChild(myTr);

 for (var i = 0 ; i < arg.numberRow ; ++i) {
  var myTr = document.createElement('tr');
  for (var index in arg.myMenue) {
   var myTd = document.createElement('td');
   myTd.innerHTML = 'test';
   myTd.setAttribute('width', arg.myMenue[index]);
   myTr.appendChild(myTd);
  }
  myTable.appendChild(myTr);
 }
 document.body.appendChild(myTable);
}