2011-09-09 17 views
0

以下は、Internet ExplorerではJavaScriptを使用してXMLからテーブルを動的に作成するのには完全に機能しますが、私は考えることができるすべてを試しましたが、しかし、まだすべての情報を表示していません。これは実際にはすべてのセルに "未定義"と表示され、Chromeは存在しないchildNodeを取得しようとします。クロームデバッグがスローするエラーは、次のとおりです。ChromeでJavaScriptを使用してXML文書を読む

誰もが、クロスブラウザの互換性のあるXML文書からHTMLテーブルを構築する良い例がありますか?誰でもChromeでこの作業を行うために変更が必要なことを知っていますか?このトピックに関しては、多数のQ & A Stack Overflowに関する記事を読んだことがありますが、特にこの問題に対処するものはありません。

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> 
+0

xml要素名の大文字と小文字は区別されますか? XMLを見て、XHR呼び出しから戻ってXML文書を取得するのに役立つでしょうか。 –

+0

私はVS 2010でデバッグしており、この関数の先頭にブレークポイントを追加しています.DASHDataTableXML。私は完全なXMLドキュメントを取得しています..私は説明で言ったように、このコードはIEで完全に動作します。 xlr呼び出しからxmlドキュメントを取得できなかった場合は、IEでも動作します。私はxml要素名の大文字と小文字の区別をチェックするつもりです...多分私はそこに何かを探しています。ポール、あなたの応答から、私はあなたが正常に私のコードに間違って何かを見ていないと思うそれについては正常にJavaScriptをテーブルを構築する? – wakurth

+1

と思われます。あなたの 'var xNodeName = innerNodes [n]'の使用は、 'n 'がどんな価値を持っていると思いますか?最後の 'if'に' magic 'という値の代わりに 'Node.ELEMENT_NODE'を使います。 –

答えて

1

私は見つけることができる唯一のエラーは、

var value = node.text

代わりの

var value = node.firstChild.nodeValue

を使用するということでした

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

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

例はthis jsfiddle linkです。

+1

ありがとうございます。 node.firstChild.nodeValueは、異なるブラウザタイプに対して異なるコードを実行する代わりに、すべてのブラウザで機能します。それを信じるかどうか、前にjsfiddleについて聞いたことはありません。再度、感謝します。 – wakurth

関連する問題