獲取XML父數據的數據使用javascript的表格

我需要從XML文件中使用JavaScript獲取數據到HTML表格。獲取XML父數據的數據使用javascript的表格

我已經通過W3School例如http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

走在我的XML文件中的孩子和家長的屬性可能是相同的，但我想只顯示父屬性

<resource> 
    <parent> 
    <item>item1</item> 
    <attribute> 
     <item>subitem</item> 
    </attribute> 
     <item>subitem</item> 
    <description> 
    </description> 
    </parent> 
</resource>

在上面的例子中我有兩個項目的標籤，一個是家長，另一個是子項目。我只是想獲得父標籤值

這裏我的html代碼

<!DOCTYPE html> 
<html> 
<style> 
table,th,td { 
    border : 1px solid black; 
    border-collapse: collapse; 
} 
th,td { 
    padding: 5px; 
} 
</style> 
<body onload="loadXMLDoc();"> 


<br><br> 
<table id="demo"></table> 

<script> 
function loadXMLDoc() { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     myFunction(this); 
    } 
    }; 
    xmlhttp.open("GET", "newXMLfile.xml", true); 
    xmlhttp.send(); 
} 
function myFunction(xml) { 
    var i; 
    var xmlDoc = xml.responseXML; 
    var table="<tr><th>Name</th></tr>"; 
    var x = xmlDoc.getElementsByTagName("parent"); 
    for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" + 
    x[i].getElementsByTagName("item")[0].childNodes[0].nodeValue + 
    "</td>"; 
    } 
    document.getElementById("demo").innerHTML = table; 
} 
</script> 

</body> 
</html>

但我在這裏只得到子項目標籤值。

來源

2016-11-08 macha devendher

你需要什麼結果呢？名稱子項目？ – Alexandr

想要只打印父屬性值 value1 –

如果我理解正確，<item>的 <attribute>不是subitem。它的item。

如果你只需要在<parent>內<item>小號不包括內<attribute>的那些：

從getByTagName()取出childNodes[0]。它在<parent>內打印所有<item>標籤的第一個孩子。
添加一個簡單的查看，看看<item>的parentNode是<parent>。然後打印它們。

喜歡的東西：

//Get every <item> within <parent> 
var item = x[i].getElementsByTagName('item'); 
//for each item 
for(...){ 
    if(item[i].parentNode.name == "parent"){ 
    table += "<tr><td>" + 
    item[i].nodeValue + 
    "</td>"; 
    } 
}

我不能完全肯定怎麼樣parentNode.name。這只是一個想法。

Here是MSDN文檔。

來源

2016-11-08 23:26:34 Bharath

感謝您的回答，並讓我檢查一次 –

獲取空值 –

如果我理解你的話，請嘗試下一個代碼。

var testXML=`<resource> 
 
    <parent> 
 
    <item>item1</item> 
 
    <attribute> 
 
     <item>attribute subitem</item> 
 
    </attribute> 
 
     <item> subitem</item> 
 
    <description> 
 
    </description> 
 
    </parent> 
 
</resource>`; 
 

 
function myFunction(xml) { 
 
    var table="<tr><th>Name</th></tr>"; 
 
    var parentNodes = $(xml).find("parent"); 
 
    for (var i = 0; i <parentNodes.length; i++) { 
 
    table += "<tr><td>" + 
 
    $(parentNodes[i]).find("attribute item").text() + 
 
    "</td>"; 
 
    } 
 
    document.getElementById("demo").innerHTML = table; 
 
} 
 

 
myFunction(testXML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="demo"></table>

來源

2016-11-09 09:44:57 Alexandr

獲取XML父數據的數據使用javascript的表格

回答

相關問題