オブジェクトのメンバを見る

色々とJavaScriptで書いていると、オブジェクトのメンバを見たくなることがあります。他のことをやっていて偶然気付きました。他にも紹介されていると思いますが、メモしておきます。

view plainprint?

1. for(var i in this) {  
2.  alert(i);  
3. }  

for(var i in this) {
 alert(i);
}

ただし、注意しないと大量のメンバが表示されて、OKボタンを押すだけで飽きてしまいます（笑）
また、Mac OS X上のSafari 5でしか動作確認していません。ご注意ください。

もう一つの表<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);
}

insertRowとinsertCell

JavaScriptで表を扱う時の関数insertRowやinsertCellですが、よく紹介されている方法とは少々異なる使い方のメモです。ただし、Mac OS X上のSafari 5とFirefox 3.6.3でしか動作確認していません。ご注意ください。

insertRowやinsertCellはJavaScriptで表を描画する時に利用される命令の一つで、insertRowにより表に一行追加でき、insertCellではセルを一つ追加できます。例えばinsertCell(n)としてnに数値を渡すと、nの位置にセルを挿入します。このnをinsertCell()またはinsertCell(-1)とすると行の一番最後にセルを追加します。サンプルコードなどで表を描画する時にループ文を利用しますが、この時に逐一nの値を与える必要はなく、insertCell(-1)とするだけで描画できます。これはinsertRow()でも同じです。

さらに、insertCell()では<td>タグが生成されます。しかし、先頭項目などを表す<th>タグを直接生成する命令は見あたりません。代案としてinsertCell()で<td>タグを生成して、その中身を設定する時にouterHTMLを使用することで<th>タグを間接的に生成できます。

上記の方法をまとめて例を書くと以下のようになります。

view plainprint?

1. testData = new Array(10, 12, 15, 43);  
2. --- some codes ---  
3. for (var index in testData) {  
4.  var myTh = myTr.insertCell(-1);  
5.  myTh.outerHTML = "<th>" + index + "</th>";  
6.  --- some codes ---  
7. }  
8. delete testData;  

testData = new Array(10, 12, 15, 43);
--- some codes ---
for (var index in testData) {
 var myTh = myTr.insertCell(-1);
 myTh.outerHTML = "<th>" + index + "</th>";
 --- some codes ---
}
delete testData;

ただし、Safari 5ではinsertCell(-1)としないとindexの順が逆になる場合があるようです。