getAttribute在我的html表上显示未定义
[英]getAttribute shows undefined on my html table
问题描述
So this is my html and xml and what i'm trying to do is import the stationID,distance,address,value of h24 and all fuel attributes and when a person presses the button i want the person to see those exact elements and attributes of the xml file. 
所以这是我的html和xml ，我想做的是导入h24的stationID，距离，地址，值和所有燃料属性，当有人按下按钮时，我希望该人看到那些确切的元素和属性xml文件。 The problem is that not only some show as undefined and null (as you can see in the pic ) but some elements like phone that has two phones i can't make those two to show. 问题在于，不仅有些显示为undefined和null（如您在图片中所示 ），而且某些元素（如phone）具有两部手机，但我无法使这两个显示。
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE dataset [ <!ELEMENT dataset (station*)> <!ATTLIST dataset lat CDATA #REQUIRED long CDATA #REQUIRED msg CDATA #REQUIRED > <!ELEMENT station (country, municipality, dd, address, companyName, lat, long, h24, brand, phone*, fuels)> <!ATTLIST station stationID CDATA #REQUIRED distance CDATA #REQUIRED > <!ELEMENT country (#PCDATA)> <!ATTLIST country countryID CDATA #IMPLIED> <!ELEMENT municipality (#PCDATA)> <!ATTLIST municipality municipalityID CDATA #IMPLIED> <!ELEMENT dd (#PCDATA)> <!ATTLIST dd ddID CDATA #IMPLIED> <!ELEMENT address (#PCDATA)> <!ELEMENT companyName (#PCDATA)> <!ELEMENT lat (#PCDATA)> <!ELEMENT long (#PCDATA)> <!ELEMENT h24 (#PCDATA)> <!ATTLIST h24 value CDATA #REQUIRED> <!ELEMENT brand (#PCDATA|EKO|Shell|JETOIL)*> <!ATTLIST brand brandID CDATA #REQUIRED> <!ELEMENT phone (#PCDATA)> <!ELEMENT fuels (fuel*)> <!ATTLIST fuels fuelTypeID CDATA #IMPLIED price CDATA #IMPLIED priceTimeStamp CDATA #IMPLIED > ]> <dataset lat="23.123233" long="40.12333" msg="Hello user!"> <station stationID="11111" distance="1.4"> <country countryID="49000200">Λάρισας</country> <municipality municipalityID="12345">Φαρσάλων</municipality> <dd ddID="12345">Κοινότητα Σταυρού</dd> <address><![CDATA[Σόλωνος 35, Σταυρός]]></address> <companyName><![CDATA[Τζίμης Oil]]></companyName> <lat>23.111456</lat> <long>41.1114567</long> <h24 value="0"/> <brand brandID="1">EKO</brand> <phone>2410555666</phone> <phone>6932555444</phone> <fuels> <fuel fuelTypeID="1" price="1.543" priceTimeStamp="2018-10-22 07:30:17">Super Duper Αμόλυβδη</fuel> <fuel fuelTypeID="2" price="1.043" priceTimeStamp="2018-10-22 07:30:45">WOW Diesel</fuel> </fuels> </station> <station stationID="22222" distance="2.4"> <country countryID="49000200">Λάρισας</country> <municipality municipalityID="223344">Φαρσάλων</municipality> <dd ddID="222222">Τερψιθέα</dd> <address><![CDATA[Λαρίσης 22, Τερψιθέα]]></address> <companyName><![CDATA[ΤερψιOIL]]></companyName> <lat>23.223456</lat> <long>41.2234567</long> <h24 value="0"/> <brand brandID="2">/Shell</brand> <phone>2410555666</phone> <fuels> <fuel fuelTypeID="1" price="1.622" priceTimeStamp="2018-11-02 08:30:17">Super Duper Αμόλυβδη</fuel> <fuel fuelTypeID="2" price="1.042" priceTimeStamp="2018-11-02 08:30:45">WOW Diesel</fuel> </fuels> </station> <station stationID="33333" distance="3.4"> <country countryID="32000200">Μαγνησίας</country> <municipality municipalityID="332211">Βελεστίνου</municipality> <dd ddID="34567">Βελεστίνο</dd> <address><![CDATA[Κενταύρου 35, Βελεστίνο]]></address> <companyName><![CDATA[Κένταυρος Oil]]></companyName> <lat>23.333333</lat> <long>41.333333</long> <h24 value="1"/> <brand brandID="3">JETOIL</brand> <phone>6932555444</phone> <fuels> <fuel fuelTypeID="1" price="1.543" priceTimeStamp="2018-11-10 07:30:17">Super Duper Αμόλυβδη</fuel> <fuel fuelTypeID="2" price="1.043" priceTimeStamp="2018-11-10 07:30:45">WOW Diesel</fuel> </fuels> </station> </dataset>
<!DOCTYPE html> <html style="height: 100%; width: 100%;"> <style> th{ border:1px solid black; } td{ border:1px solid black; } table{ border:1px solid black; } </style> <body style="height: 100%; width: 100%;"> <div id="div1" style="display:inline-block; width:150px; height:auto; float:left; border-style:groove;"> XML file <button type="button" onclick="loadXml()">Load...</button> JSON file <button type="button">Load...</button> Clear Page <button type="button" name="load_clear" id="clear">Clear</button> </div> <div id="div2" style= "display:inline-block; width:90%; height:100%; border-style:groove;"> <table id="demo"></table> </div> <script type="text/javascript"> function loadXml() { var openxml = new XMLHttpRequest(); openxml.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; openxml.open("GET", "fuel.xml", false); openxml.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>StationID</th><th>Distance</th><th>Address</th><th>H24</th><th>Phones</th><th>FuelTypeID</th><th>FuelPrice</th></tr>"; var x = xmlDoc.getElementsByTagName("station","h24"); for (i = 0; i < 3; i++){ table += "<tr><td>" + x[i].getAttribute("stationID")+ "</td><td>" + x[i].getAttribute("distance")+ "</td><td>" + x[i].getElementsByTagName("address")[0].firstChild.data+ "</td><td>" + x[i].getAttribute["value"]+ "</td><td>"+ x[i].getElementsByTagName("phone")[0].firstChild.data+ "</td><td>" + x[i].getElementsByTagName("fuel")[0].getAttribute("fuelTypeId")+ "</td><td>"+ x[i].getElementsByTagName("fuel")[0].getAttribute("price")+ "</td></tr>"; } document.getElementById("demo").innerHTML = table; } </script> </body> </html>
1 个解决方案
解决方案1
0 2018-11-12 23:29:21
If you look closer at the xml, there's a couple things to notice: 如果您仔细看一下xml，则需要注意以下几点：
-
h24is not an attribute of the<station>node, but rather avalueof a child<h24>node, hence you're gettingundefinedh24是不是一个属性<station>节点，而是一个value孩子的<h24>节点，因此，你要undefined -
.getAttribute("fuelTypeId")should have a capitalizedD:.getAttribute("fuelTypeID").getAttribute("fuelTypeId")应该使用大写字母D：.getAttribute("fuelTypeID") - As for
<phone>and<fuel>nodes, you'll first need to decide how you want to display their data: eg if you just want to join the values into a comma-separated string or have several cells, etc.对于<phone>和<fuel>节点，您首先需要决定如何显示其数据：例如，如果您只想将值连接成逗号分隔的字符串或具有多个单元格，等等。
UPD: If you want a comma-separated string made out of attribute values or node texts, you'll first need to get an array of nodes. UPD：如果要用属性值或节点文本组成的逗号分隔字符串，则首先需要获取节点数组。 Notice how you're accessing a particular node (eg .getElementsByTagName("fuel")[0] ) by specifying its index - [0] - in the collection of nodes. 注意，如何通过在节点集合中指定其索引- [0]来访问特定节点（例如.getElementsByTagName("fuel")[0] ）。 To make an array out of such collection you'll need to do something like Array.from(x[i].getElementsByTagName("fuel")) (also read Most efficient way to convert an HTMLCollection to an Array ). 要从此类集合中制作一个数组，您需要执行Array.from(x[i].getElementsByTagName("fuel")) （另请参阅将HTMLCollection转换为Array的最有效方法 ）。 Now that you have an array, you can transform it into an array of the strings (be it attribute values or texts) using something like Array.prototype.map() . 有了数组后，您可以使用Array.prototype.map（）将其转换为字符串数组（属性值或文本） 。 Then you can just join the strings in the array into a single comma-separated string using Array.prototype.join() . 然后，您可以使用Array.prototype.join（）将数组中的字符串连接成单个逗号分隔的字符串。 You really need to read up on stuff like working with HTMLCollections and Arrays in javascript. 您确实需要阅读诸如使用JavaScript中的HTMLCollections和Arrays之类的内容。 There is no other way around that unless you want someone else to come up with the whole thing for you. 除非您希望别人为您解决整个问题，否则别无选择。 MDN is a good start, it has plenty of examples. MDN是一个好的开始，它有很多示例。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.