XML转换成HTML表格，用于弹出传单地图标记

XML into HTML table for a leaflet map marker popup

本文关键字：单地 图标 用于 转换 HTML 表格 XML      更新时间：2023-09-26

我有一个带有一系列位置(当地政府区域质心)的web地图，根据LGA内部是否有特征，这些位置被过滤掉了。它通过存储与这些位置相关的特性的xml文档来实现这一点。

<LGA name="ThisLGA">
      <feature>
           <name>Feature 1</name>
           <status>lolcat</status>
      </feature>
      <feature>
           <name>Feature 2</name>
           <status>lolcat</status>
      </feature>
</LGA>
<LGA name="ThisOtherLGA">
      <feature>
           <name>Feature 1</name>
           <status>lolcat</status>
      </feature>
      <feature>
           <name>Feature 1</name>
           <status>lolcat</status>
      </feature>
</LGA>

我现在要做的是让每个LGA标记的弹出包含每个功能名称和状态(最终可能还有其他属性)的表。

有没有人对如何实现这一点有任何建议，我看到一些人使用underscore.js和创建HTML模板。然而，我不知道我需要多少行，所以它必须动态完成。

是什么东西是做php比javascript更多?

算出来了，如果有人感兴趣，我想给出解决方案。

需要一个字符串作为HTML放入。bindpopup()方法

function popupTable(LGA){
//Load in xml document
var xml = loadXML("spatialLayers/nctProperties.xml");
//Start of HTML string for popup
var htmlString = "<div><table>";
//Create list of all LGA nodes
var xmls=xml.getElementsByTagName("LGA");
for (i=0;i<xmls.length;i++){ 
    //Get a specific LGA and create HTML string of
    if (xmls[i].getAttribute("type")===LGA){
        var iteratorLength = xmls[i].getElementsByTagName("name").length;
        //Loop through all child nodes of the LGA
        for (j=0;j<iteratorLength;j++){
            var status = xmls[i].getElementsByTagName("status")[j].childNodes[0].nodeValue;
//Customise icon in table based upon property status
            if (status === "Covenant Registered"){
                var addToString = "<tr><td>"+ xmls[i].getElementsByTagName("name")[j].childNodes[0].nodeValue+"</td><td><image src=images/mapMarkers/marker1_green_mini.png></td></tr>";
            }else if (status === "Yellow Box"){
                var addToString = "<tr><td>"+ xmls[i].getElementsByTagName("name")[j].childNodes[0].nodeValue+"</td><td><image src=images/mapMarkers/marker1_yellowbox_mini.png></td></tr>";
            }else if (status === "For Sale"){
                var addToString = "<tr><td>"+ xmls[i].getElementsByTagName("name")[j].childNodes[0].nodeValue+"</td><td><image src=images/mapMarkers/marker1_brown_mini.png></td></tr>";
            }else{
                var addToString = "<tr><td>"+ xmls[i].getElementsByTagName("name")[j].childNodes[0].nodeValue+"</td><td>";
            }
            //console.log(addToString); 
            htmlString = htmlString + addToString;
    };
    };
};
return htmlString +"</table></div>";

}

相关文章：