Question

以下工作非常适合在IE中使用JavaScript从XML动态创建表格，但不是Chrome ...我已经尝试了我能想到的一切，这在chrome中获得了最好的结果，但仍然没有全部显示信息..这实际上在每个单元格中显示“未定义”，Chrome尝试获取不存在的childNode并停止。 Chrome调试引发的错误是：

“Uncaught TypeError：无法读取未定义的属性'childNodes'”......

有没有人有一个从跨浏览器兼容的xml文档构建html表的好例子？或者是否有人知道需要更改哪些内容才能在Chrome中使用？我已经阅读了有关此主题的Stack Overflow上的大量Q＆amp; A，但没有一个具体解决这个问题。

var rSecTable = null;
function buildSecTable() {
var DASHBOARD = new DASHBOARDUI();
var XMLDoc = DASHBOARD.DASHDataSource("DashboardService.asmx/RecentSecurityChanges?");
var element = 'secTbl';
var rootNode = 'Security';
var objNode = 'results';
var tblhdClass = 'DASHTableHead';
var innerNodes = new Array("time", "search_text", "name"); // for now, these need to be in reverse order
rSecTable = DASHBOARD.DASHDataTableXML(element, XMLDoc, rootNode, objNode, innerNodes, tblhdClass);
}

function DASHBOARDUI() {

this.DASHDataSource = function (url) {
    var xmlDoc;
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", url, false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    return xmlDoc;
}

this.isEvenRow = function (value) {
    if (value % 2 == 0)
        return 'DASHTableBodyEven';
    else
        return 'DASHTableBodyOdd';
}

this.DASHTableHeaderFormatter = function (text) {
    var value = "";
    if (text == 'name') {
        value = 'User Name';
    }
    else if (text == 'search_text') {
        value = 'Search Syntax';
    }
    else if (text == 'time') {
        value = 'Date\/Time';
    }
    else if (text == 'rights') {
        value = 'Current Security Rights';
    }
    else if (text == 'Volume_Name') {
        value = 'Volume Name';
    }
    else if (text == 'Size_On_Disk') {
        value = 'Volume Size On Disk (GB)';
    }
    else if (text == 'Total_Disk_Space') {
        value = 'Total Disk Space Where Volume Resides (GB)';
    }
    else {
        value = text;
    }
    return value;
}


this.DASHDataTableXML = function (element, xmlDoc, rootNode, objectNode, innerNodes, tblhdClass) {
    // assign base object node and child count
    var root = xmlDoc.getElementsByTagName(rootNode)[0];
    var rowcount = root.childNodes.length;
    var oNodeOne = xmlDoc.getElementsByTagName(objectNode)[0];
    var colcount = oNodeOne.childNodes.length;

    // call table element (must be a 'table' tag for now)
    var dt = document.getElementById(element);
    dt.className = 'DASHTable';

    var hdRow = dt.insertRow(0);
    hdRow.className = tblhdClass;
    var i = 0;
    for (n in innerNodes) {
        var nCell = hdRow.insertCell(i);
        nCell.innerHTML = this.DASHTableHeaderFormatter(innerNodes[n]);
    }

    for (var j = 0; j < rowcount; j++) {
        var newRow = dt.insertRow(j + 1);
        newRow.className = this.isEvenRow(j);
        for (var y = 0; y < colcount; y++) {
            var dataCell = newRow.insertCell(y);
            var base = xmlDoc.getElementsByTagName(objectNode)[j];
            var xNodeName = innerNodes[n];
            var node = base.childNodes[y];
            if (node.nodeType == 1) {
                var value = node.text;
                dataCell.innerHTML = value;
            }
        }
    }
}

}

示例XHR返回：

<?xml version="1.0" ?> 
<Security>
<results>
<name>Bill</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit ,     Migrate , Get Information , Apply Watermarks</rights> 
<time>8/29/2011 3:58:30 PM</time> 
</results>
<results>
<name>Mary</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:45 PM</time> 
</results>
<results>
<name>Paul</name> 
<rights>Scan , Export , Print , Delete , Import , Move , Process , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:38 PM</time> 
</results>
<results>
<name>Jane</name> 
<rights>Export , Print , Import , Edit , Migrate</rights> 
<time>8/19/2011 4:32:57 PM</time> 
</results>
<results>
<name>Walter</name> 
<rights>Scan , Export , Print , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:31:23 PM</time> 
</results>
<results>
<name>Frank</name> 
<rights>Scan , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:17:44 PM</time> 
</results>
<results>
<name>Dan</name> 
<rights>Scan , Import</rights> 
<time>8/19/2011 3:49:18 PM</time> 
</results>
<results>
<name>Tom</name> 
<rights>Scan , Export , Print , Search , Import , Move , Process , Edit , Apply Watermarks</rights> 
<time>8/19/2011 3:36:24 PM</time> 
</results>
<results>
<name>Russ</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 4:31:43 PM</time> 
</results>
<results>
<name>ADMIN</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 2:23:47 PM</time> 
</results>
</Security>

Answer 1

我能找到的唯一错误是你使用

var value = node.text

而不是

var value = node.firstChild.nodeValue

该节点是Element，其中只有一个Node个TextNode，因此您需要使用此node.firstChild.nodeValue模式。

我使用for (var n = 0 ...循环而不是for (n in ...，因为有时JS框架可以改变Array对象，这会产生令人讨厌的副作用。

this jsfiddle link有一个例子。

在Chrome中使用JavaScript读取XML文档

1 个答案: