HTML中使用JavaScript创建TR和TD

有时候我们需要动态的创建Tr和Td对象.

这里要说的是在IE中和在FireFox中不同之处.

假设我们有下面这个玩意, 一个Table的壳子.

<table id="table">
</table>

 现在需要创建一个TR

IE中如下:

var table = document.getElementById("table");
var tr = table.insertRow();

这真是一个好东西, 不过在FireFox当中, 呵呵, 这个貌似不管用, 运行第二句就彻底玩完了. 应该写成下面这样

var table = document.getElementById("table");
var tr = document.createElement("tr");
table.appendChild(tr);

FireFox中完全是按照XML的写法来的, 这个代码在IE当中执行完全没有问题, 如果你想创建一个空的TR的话.

不过TD里面的内容则完全显示不出来. 我查了MSDN, 他是这么说的: "insertRow方法在Table/TBody/THead/TFoot中创建一个行对象, 并且将他插入到rows里面." 而appendChild方法似乎后一句没有做到.

td的操作方式也是一样

var tr = ...
if (ie) ...{
  var td = tr.insertCell();
} else ...{
  var td = document.createElement("td");
  tr.appendChild(td);
}

但是有个问题我没有搞明白, 就是按照上面说的理解, appendChild方法没有将TR插入到rows或者没有将TD插入到cells里面的话, 理论上应该不显示任何东西, 也就是Table下面在IE中认为什么都没有, 实际上我写了一个最简单的HTML来测试, 也是如此. 这是我得出这个结论的依据. 不过在我真正做的项目中却并非如此, 所有的TR和TD都非常正确的被显示出来了, 只是内容完全没有, 尽管innerHTML完全正确. 真是纳闷不已.