获取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>
但我在这里只得到子项目标签值。
如果我理解正确，<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文档。
感谢您的回答，并让我检查一次 –
获取空值 –
如果我理解你的话，请尝试下一个代码。
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>
如果我理解正确，<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文档。
感谢您的回答，并让我检查一次 –
获取空值 –
如果我理解你的话，请尝试下一个代码。
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>
你需要什么结果呢？
想要只打印父属性值 value1 –
回答
如果我理解正确，
<item>的<attribute>不是subitem。它的item。如果你只需要在
<parent>内<item>小号不包括内<attribute>的那些：getByTagName()取出childNodes[0]。它在<parent>内打印所有<item>标签的第一个孩子。<item>的parentNode是<parent>。然后打印它们。喜欢的东西：
我不能完全肯定怎么样
parentNode.name。这只是一个想法。Here是MSDN文档。
感谢您的回答，并让我检查一次 –
获取空值 –
如果我理解你的话，请尝试下一个代码。
相关问题