Tabelle verbessert

www/map.html

@@ -8,6 +8,8 @@
           integrity="sha256-xJOZHfpxLR/uhh1BwYFS5fhmOAdIRQaiOul5F/b7v3s=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
           integrity="sha256-t2/7smZfgrST4FS1DT0bs/KotCM74XlcqZN5Vu7xlrw=" crossorigin="anonymous"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/tables-min.css"
+          integrity="sha256-4NzXOZY2l6V9ObAblwSPfn2wI5kyZbUMaMVVbMrZDXA=" crossorigin="anonymous"/>
     <style>
         body {
             margin: 0;

www/sidebar.js

@@ -7,37 +7,40 @@ var sidebar = L.Control.extend({
         container.style.backgroundColor = "white";
         container.style.height = '600px';
         container.style.width = '400px';
-        var table = L.DomUtil.create("table", "sidebarTable", container);
         var button = document.createElement("button");
         button.textContent = "Topliste";
         container.appendChild(button);
 
+        var table = L.DomUtil.create("table", "sidebarTable pure-table pure-table-horizontal", container);
+
+        button.addEventListener("click", function () {
+            loadSidebar(table);
+        });
+        loadSidebar(table);
+
+
         return container;
     }
 });
 map.addControl(new sidebar);
 
-$(".leaflet-control-custom button").on("click", function () {
+function loadSidebar(table) {
-    loadSidebar();
-});
-
-function loadSidebar() {
     $.getJSON("/api/top/", {
         type: "shortestConnections"
     }).done(function (data) {
-        var table = $(".sidebarTable");
+        while (table.firstChild) {
+            table.removeChild(table.firstChild);
+        }
         for (var i = 0; i < data.length; i++) {
             var line = document.createElement("tr");
             var single = data[i];
-            console.log(single);
             for (var j = 0; j < single.length; j++) {
                 var td = document.createElement("td");
                 td.textContent = single[j];
                 line.appendChild(td);
             }
-            table.append(line);
+            table.appendChild(line);
         }
-
     });
 
 }