0

以下は、IE で JavaScript を使用して XML からテーブルを動的に作成するのに完全に機能しますが、Chrome では機能しません。 . これは実際にはすべてのセルに「未定義」と表示され、Chrome は存在しない childNode を取得しようとして停止します。Chrome デバッグがスローするエラーは次のとおりです。

「キャッチされていない TypeError: 未定義のプロパティ 'childNodes' を読み取れません」...

ブラウザ間で互換性のある xml ドキュメントから html テーブルを構築する良い例はありますか? または、これをChromeで機能させるために何を変更する必要があるかを誰かが知っていますか? このトピックに関して Stack Overflow で多数の Q&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>
4

1 に答える 1

1

私が見つけた唯一のエラーは、あなたが使用することでした

var value = node.text

それ以外の

var value = node.firstChild.nodeValue

ノードは、TextNodeである単一の子ノードを持つ要素であるため、このパターンを使用する必要があります。node.firstChild.nodeValue

JSフレームワークがオブジェクトを変更することがあり、これには厄介な副作用があるため、for (var n = 0 ...代わりにループを使用します。for (n in ...Array

このjsfiddleリンクに例があります。

于 2011-09-12T16:55:30.533 に答える