getAttribute在我的html表上显示未定义

时间:2018-11-12 22:57:15

标签: javascript html xml

所以这是我的html和xml,我要执行的操作是导入stationID,距离,地址,h24的值以及所有燃料属性,当有人按下按钮时,我希望该人查看xml文件的确切元素和属性。问题在于,不仅有些显示为未定义和为空(如您在pic中看到的那样),而且有些元素(例如具有两个电话的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 个答案:

答案 0 :(得分:0)

如果您仔细看一下xml,则需要注意以下几点:

  1. h24不是<station>节点的属性,而是子value节点的<h24>,因此您得到undefined < / li>
  2. .getAttribute("fuelTypeId")应该有大写的D.getAttribute("fuelTypeID")
  3. 对于<phone><fuel>节点,您首先需要决定如何显示其数据:如果您只想将这些值连接到一个逗号分隔的字符串中,或​​者有多个单元格,等等。

UPD::如果要用属性值或节点文本组成的逗号分隔字符串,则首先需要获取节点数组。请注意,您如何通过在节点集合中指定其索引-.getElementsByTagName("fuel")[0]来访问特定节点(例如[0])。要使用此类集合制作数组,您需要执行类似Array.from(x[i].getElementsByTagName("fuel"))的操作(也请阅读Most efficient way to convert an HTMLCollection to an Array)。有了数组后,您就可以使用Array.prototype.map()之类的方法将其转换为字符串数组(无论是属性值还是文本)。然后,您可以使用Array.prototype.join()将数组中的字符串连接成单个逗号分隔的字符串。您确实需要阅读诸如使用JavaScript中的HTMLCollections和Arrays之类的内容。除非您希望别人为您解决整个问题,否则别无选择。 MDN是一个好的开始,它有很多示例。