IE7でJavaScriptを使ってTableにセル(td)とか入れる方法(今更編)

むかーしむかし、全部innerHTMLで済ませてて、
あるセル消そうとする時に変になったり、
ゴリゴリ書いてた記憶があるけど、
最近、tableを使う機会があって、
createElementでやるだけじゃ無理だったので、
一応メモ。

・Firefox系、IE8なら動くやり方

var table = document.getElementsByTagName('table')[0];
var tr = document.createElement('tr');
table.appendChild(tr);
var td = document.createElement('td');
tr.appendChild(ts);

・IE7で動くやり方

var table = document.getElementsByTagName('table')[0];
var tr = table.insertRow();
var td = tr.insertCell();

なので、どっちでも動くようにするには

function addTr(table) {
  if ($.browser.msie == true) {
    return table.insertRow();
  }
  else {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    return tr;
  }
}

function addTd(tr) {
  if ($.browser.msie == true) {
    return tr.insertCell();
  }
  else {
    var td = document.createElement('td');
    tr.appendChild(td);
    return td;
  }
}

var table = document.getElementsByTagName('table')[0];
var tr = addTr(table);
var td = addTd(tr);

とか抽象化した関数作るとか。
$.browser.msieはjQueryの関数だけど...

というか、jQuery使ったら

$table = $('<table></table>');
$table.append('<tr></tr>');

でよさげですよね。
げへへ。

因みに、中身のコンテキストをいじる時は
tr.innerHTMLで普通に出来た気がします(よく試してない)。

なんか文章の書き方が変だ。
まぁいいか。

以上、いつまでもJSのライブラリをちゃんと使わない
ダメプログラマーのメモでした。

・ブコメのお返事

id:rikuba
insertRow(-1) insertCell(-1) で良いのでは。

これ、insertRow(-1)とかだと
trの追加するインデックス番号が-1だから先頭に追加できる、
ということですかね？
ちょっとよく分からなかったので、申し訳ないですが説明もらえると嬉しいです・・・！とかおもったり。