もう一つの表<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でイベント駆動もできます。

view plainprint?

1. window.onload = function(){  
2.  argTable = {  
3.   numberRow: 5,  
4.   myMenue: {  
5.    "key": 35,  
6.    "input date": 100,  
7.    "item name": 200,  
8.    "item number": 100  
9.   }  
10.  }  
11.  myTable = new testTable(argTable);  
12.  delete argTable  
13. }  
14.   
15. function testTable(arg) {  
16.  var myTable = document.createElement('table');  
17.  myTable.setAttribute('border', '1');  
18.  var myTr = document.createElement('tr');  
19.  for (var index in arg.myMenue) {  
20.   var myTh = document.createElement('th');  
21.   myTh.innerHTML = index;  
22.   myTh.setAttribute('width', arg.myMenue[index]);  
23.   myTr.appendChild(myTh);  
24.  }  
25.  myTable.appendChild(myTr);  
26.   
27.  for (var i = 0 ; i < arg.numberRow ; ++i) {  
28.   var myTr = document.createElement('tr');  
29.   for (var index in arg.myMenue) {  
30.    var myTd = document.createElement('td');  
31.    myTd.innerHTML = 'test';  
32.    myTd.setAttribute('width', arg.myMenue[index]);  
33.    myTr.appendChild(myTd);  
34.   }  
35.   myTable.appendChild(myTr);  
36.  }  
37.  document.body.appendChild(myTable);  
38. }  

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);
}