0

这是我第一次在这里写作。我有 javascript.any 的基本水平。任何帮助将不胜感激！

the html code

<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>

the js code


    if (window.XMLHttpRequest)  
      {// code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
      }   
    else  
      {// code for IE6, IE5  
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
      }
    xmlhttp.open("GET","domparser.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    //document.getElementsByTagName('li');  
    document.getElementById("Title").innerHTML=  
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;  
    document.getElementById("Temp").innerHTML=  
    xmlDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;  
    document.getElementById("Elevation").innerHTML=  
    xmlDoc.getElementsByTagName("elevation")[0].childNodes[0].nodeValue;  
    //document.getElementById("Title").innerHTML=  
    xmlDoc.getElementsByTagName("title")[1].childNodes[0].nodeValue;  
    //document.getElementById("Temp").innerHTML=  
    xmlDoc.getElementsByTagName("temp")[1].childNodes[0].nodeValue;  
    //document.getElementById("Elevation").innerHTML=  
    xmlDoc.getElementsByTagName("elevation")[1].childNodes[0].nodeValue;

这是 xml 代码- domparser.xml

<channel>    
<item>    
<title>kalimnos</title>    
<temp>50</temp>    
<elevation>650m</elevation>    
</item>    
<item>    
<title>kerkira</title>    
<temp>30</temp>    
<elevation>1650m</elevation>    
</item>    
<item>    
<title>iraklio</title>    
<temp>50</temp>    
<elevation>50m</elevation>    
</item>    
<item>    
<title>xania</title>    
<temp>30</temp>    
<elevation>150m</elevation>    
</item>    
</channel>

当 html 文件运行时，只显示 xml 文件的第一个“项目”的数据。
我试图每次都显示所有具有不同“项目”的 xml 列表项。

例如在第一个列表项中：
stathmoi：kalimnos
thermokrasia：50
海拔：650m

例如在第二个列表项中：
stathmoi：kerkira
thermokrasia：30
海拔： 1650m

ETC

4

2 回答 2

0

从“老派”的 javascript 方法，您可以执行以下操作。

获得数据后，您可以循环访问，随时创建您的结构。这意味着该结构将与您收到的数据一样大或一样小。

在标题中

window.onload = function() {
  var ul = document.getElementById("my-listview");

  // replace 'i<10' with 'i<xmlDoc.getElementsByTagName("title").length' 
  for (var i=0; i<10; i++) {
    var li = document.createElement("li");
    // Left 1
    var divLeft1 = document.createElement("div");
    divLeft1.className = "Left1";
    li.appendChild(divLeft1);
    var div2 = document.createElement("div");
    div2.id = "Title"+i
    div2.innerHTML = div2.id; //xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
    divLeft1.appendChild(div2);

    // Left 2
    var divLeft2 = document.createElement("div");
    divLeft2.className = "Left2";
    li.appendChild(divLeft2);
    var div3 = document.createElement("div");
    div3.id = "Temp"+i
    div3.innerHTML = div3.id; //xmlDoc.getElementsByTagName("temp")[i].childNodes[0].nodeValue;
    divLeft2.appendChild(div3);
    var div4 = document.createElement("div");
    div4.id = "Elevation"+i
    div4.innerHTML = div4.id; //xmlDoc.getElementsByTagName("elevation")[i].childNodes[0].nodeValue;
    divLeft2.appendChild(div4);

    // Right1
    var divRight1 = document.createElement("div");
    divRight1.className = "Right1";
    li.appendChild(divRight1);
    var div5 = document.createElement("div");
    div5.id = "Beaufort"+i
    div5.innerHTML = div5.id;  //xmlDoc.getElementsByTagName("beaufort")[i].childNodes[0].nodeValue;
    divRight1.appendChild(div5);

    ul.appendChild(li);
  }
};

当页面完成加载后，这会将结构插入到您的“ul”中：

您可以在 W3Schools 上找到有关“createElement”的更多信息，但任何标准标签都可以通过这种方式创建。 http://www.w3schools.com/jsref/met_document_createelement.asp

于 2013-11-01T12:21:40.277 回答
0

对跨度使用不同的 ID。

<li>
<b>stathmoi: </b><span id="Title"></span><br/>
<b>thermokrasia: </b><span id="Temp"></span><br/>
<b>Elevation: </b><span id="Elevation"></span><br/>
</li><hr/>
<li>
<b>stathmoi: </b><span id="Title1"></span><br/>
<b>thermokrasia: </b><span id="Temp1"></span><br/>
<b>Elevation: </b><span id="Elevation1"></span><br/>
</li><hr/>
于 2013-10-31T19:26:02.107 回答