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完全正确. 真是纳闷不已.