Hinzufügen einer Tabelle zu den Popup-Informationen in Leaflet

Question

Ich möchte eine Tabelle um die Popup-Informationen in Leaflet erstellen. Ich verwende Bootstrap für den Mark-up. Ich habe versucht, den folgenden Code, aber es hat nicht funktioniert:

onEachFeature: function (feature, layer) { 
      layer.on({ 
       click: function showResultsInDiv() { 
        var d= document.getElementById('tab4'); 
        d.innerHTML = "<table>" 
             "<tbody>" 
             "<tr>" 
              "<th scope="row"><h3>" + feature.properties.name + "</h3></th>" 
             "</tr>" 
             "<tr>" 
              "<th scope="row">" "</th>" 
             "</tr>" 
             "<tr>" 
              "<th scope="row">ID</th>" 
              "<td>" + feature.properties.id + "</td>" 
             "</tr>" 
             "<tr>" 
              "<th scope="row">X</th>" 
              "<td>" + feature.properties.x + "</td>" 
             "</tr>" 
             "<tr>" 
              "<th scope="row">Y</th>" 
              "<td>" + feature.properties.y + "</td>" 
             "</tr>" 
             "<tr>" 
              "<th scope="row">Keten</th>" 
              "<td>" + feature.properties.keten + "</td>" 
             "</tr>" 
             "<tr>" 
              "<th scope="row">Naam</th>" 
              "<td>" + feature.properties.name + "</td>" 
             "</tr>" 
             "</tbody>" 
            "</table>"; 
       } 
      }); } 
    }).addTo(map); 

Dies ist, was ich will:

Dieser Code funktioniert aber nicht geben Sie mir Tabelle Aufschlags:

d.innerHTML = "<h3>" + feature.properties.name + "</h3> ID:" + feature.properties.id + "<br> X-as:" + feature.properties.x + "<br> Y-as:" + feature.properties.y + "<br> Keten:" + feature.properties.keten + "<br> Naam:" + feature.properties.name; 
         $('.nav-tabs a[href="#tab4"]').tab('show'); 

Answer 1

Sie haben zwei Probleme:

• Die Zeichenfolgen werden nicht verkettet. Wenn Sie vorhaben, Strings auf diese Weise in JS zu spalten, einen + Operator am Ende jeder Zeile baumeln verwenden, d.h .:

  d.innerHTML = "<table>" + 
         "<tbody>" + 
          "<tr>" + 
          // etc 
  

• standardmäßig Tabellen in HTML haben keine Grenzen. Weisen Sie ihm entweder eine CSS-Klasse zu oder verwenden Sie in Ihrem <table>-Tag Inline-CSS.