关于tbody和appendChild()的研究
昨天在给同学搞一段 js 的时候遇到一个问题，和大家分享一下。
首先我们写一个很简单的 table，中间不带 tbody，看一下它在各浏览器下是如何被解析的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
table, td { border:1px solid #CCCCCC; border-collapse:collapse; padding:5px; }
</style>
</head>
<body>
<table id="table">
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td>测试</td>
</tr>
</table>
</body>
</html>
看一下在各浏览器下的解析：
一样的，他们都默认的为 table 添加了 tbody，可以在这里看到例子。那么现在让我们用 js 为表格添加一行。
JS 代码：
var tableObj = document.getElementById("table");
var newtr = document.createElement("tr");
var td1 = document.createElement("td");
var td1text = document.createTextNode("测试");
newtr.appendChild(td1);
td1.appendChild(td1text);
var td2 = document.createElement("td");
var td2text = document.createTextNode("测试");
newtr.appendChild(td2);
td2.appendChild(td2text);
var td3 = document.createElement("td");
var td3text = document.createTextNode("测试");
newtr.appendChild(td3);
td3.appendChild(td3text);
var td4 = document.createElement("td");
var td4text = document.createTextNode("测试");
newtr.appendChild(td4);
td4.appendChild(td4text);
tableObj.appendChild(newtr);
现在我们看看浏览器是怎么解释的：
也就是说浏览器将我们新建的一行添加到了 tbody 之外，而且在 IE7 中看不到任何添加的很急，在 Opera 和 Firefox 里边可以看到，可以在这里看到例子。那现在该如何解决呢？我们应该是想办法将新建的元素添加到 tbody 里边去。最先想到的就是获取 tbody，然后在 tbody 里使用 appendChild，但是我们的页面里没有写 tbody，是否能够获得呢？答案是肯定的，可以在 JS 中测试一下：
alert(tableObj.getElementsByTagName("tbody"));
我们在各个浏览器里得到的结果都是1，那么证明此方法可行，因此我们将用 tbody 代替 table 执行 appendChild()。
JS 代码修改为：
var tableObj = document.getElementById("table");
var tbodyObj = tableObj.getElementsByTagName("tbody")[0];
var newtr = document.createElement("tr");
var td1 = document.createElement("td");
var td1text = document.createTextNode("测试");
newtr.appendChild(td1);
td1.appendChild(td1text);
var td2 = document.createElement("td");
var td2text = document.createTextNode("测试");
newtr.appendChild(td2);
td2.appendChild(td2text);
var td3 = document.createElement("td");
var td3text = document.createTextNode("测试");
newtr.appendChild(td3);
td3.appendChild(td3text);
var td4 = document.createElement("td");
var td4text = document.createTextNode("测试");
newtr.appendChild(td4);
td4.appendChild(td4text);
tbodyObj.appendChild(newtr);
看下各浏览器的解析：
页面中也都显示正常，可以在这里看到例子。
同样在 table 里边添加行还有别的方法，我们不妨看一下。这里使用 insertRow 和 insertCell()。
JS 代码如下：
var tableObj = document.getElementById("table");
var trs = tableObj.getElementsByTagName("tr");
var newtr = tableObj.insertRow(trs.length);
var newtd1 = newtr.insertCell(0);
newtd1.innerHTML = "测试2";
var newtd2 = newtr.insertCell(0);
newtd2.innerHTML = "测试2";
var newtd3 = newtr.insertCell(0);
newtd3.innerHTML = "测试2";
var newtd4 = newtr.insertCell(0);
newtd4.innerHTML = "测试2";
在各浏览器的解析与上一个的解析一样的，可以在这里看到例子。
注：insertCell() 只能插入 td，如果要插入 th 的话需要使用document.createElement 来创建。另外，Firefox 3.0.1 依然不支持 innerText 和 outerHTML，而 IE7 和 Opera 9.51 都是支持的。因此，在单元格中插入内容的时候需要使用 innerHTML 来解决在 Firefox 下的问题，或者也可使用 firstChild.nodeValue 来代替 innerHTML。
标签： appendChild(), insertCell, insertRow, tbody
这篇文章发布于 2008年07月31日，星期四，12:05，归类于 JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
