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