跨浏览器操作HTML表格的兼容性与节点遍历技巧

（一）

跨浏览器表格操作差异对比

IE、Firefox以及其他浏览器在处理table标签时存在显著差异。在IE浏览器中，直接对table和tr元素的innerHTML赋值是被禁止的；同时，在使用JavaScript动态添加tr元素时，单纯调用appendChild方法往往无法达到预期效果。以下是针对三种主流浏览器的测试结果：

insertRow

IE6：完全支持该方法，且默认参数为-1，表示将新行追加到表格末尾。

Firefox：支持该方法，但不支持省略默认参数，必须显式指定索引。

Opera：支持该方法及默认参数，但默认行为是将新行插入到表格最前面。

AppendChild

IE6：不支持通过此方法直接操作表格行的预期效果。

Firefox：支持该方法，但在增加TR后，表格的ROWS集合不会立即反映变化。

Opera：支持该方法，其行为与调用insertRow(-1)类似，且会正确影响ROWS集合。

为了编写安全且具有高适用性的代码，应尽可能遵循Web标准规范。

兼容多浏览器的表格行添加示例

// 向table追加一个空行的兼容写法：

var otr = otable.insertRow(-1);

var otd = document.createElement("td");

otd.innerHTML = " ";

otd.className = "XXXX";

otr.appendChild(otd);

采用上述方式编写的代码可以在IE、Firefox和Opera这三种浏览器中正常运行。

利用childNodes遍历节点的技巧

（三）childNodes的操作

（1）属性nodeName

Utils.getChildrenByTagName = function (node, tagName) {

var ln = node.childNodes.length;

var arr = [];

for (var z = 0; z < ln; z++) {

if (node.childNodes[z].nodeName == tagName) {

arr.push(node.childNodes[z]);

return arr;

（2）属性id

function getNodeID(parent, id) {

var ln = parent.childNodes.length;

for (var z = 0; z < ln; z++) {

if (parent.childNodes[z].id == id) {

return parent.childNodes[z];

return null;

（3）属性className

对应class,如 <tr class="class1">

function getElementsByClassName(node, className) {

var children = node.getElementsByTagName("*");

var elements = new Array();

for (var i = 0; i < children.length; i++) {

var child = children[i];

var classNames = child.className.split(" ");

for (var j = 0; j < classNames.length; j++) {

if (classNames[j] == className) {

elements.push(child);

break;

return elements;