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

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

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

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>タグを間接的に生成できます。

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

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の順が逆になる場合があるようです。