gluon-status-page: refactor creation of table rows and cells (#738)

package/gluon-status-page/src/js/lib/gui/neighbours.js

@@ -31,20 +31,13 @@ function (Helper, SignalGraph, Signal) {
   }
 
   function TableEntry(parent, nodeInfo, color, stream, mgmtBus, signal) {
-    var el = document.createElement("tr")
-    parent.appendChild(el)
-
-    var tdHostname = document.createElement("td")
-    var tdTQ = document.createElement("td")
-    var tdSignal = document.createElement("td")
-    var tdDistance = document.createElement("td")
-    var tdInactive = document.createElement("td")
+    var el = parent.insertRow()
 
-    el.appendChild(tdHostname)
-    el.appendChild(tdTQ)
-    el.appendChild(tdSignal)
-    el.appendChild(tdDistance)
-    el.appendChild(tdInactive)
+    var tdHostname = el.insertCell()
+    var tdTQ = el.insertCell()
+    var tdSignal = el.insertCell()
+    var tdDistance = el.insertCell()
+    var tdInactive = el.insertCell()
 
     var marker = document.createElement("span")
     marker.textContent = "⬤ "
@@ -69,7 +62,7 @@ function (Helper, SignalGraph, Signal) {
 
     el.destroy = function () {
       unsubscribe()
-      parent.removeChild(el)
+      parent.tBodies[0].removeChild(el)
     }
 
     return el
@@ -135,8 +128,7 @@ function (Helper, SignalGraph, Signal) {
     el.appendChild(h)
 
     var table = document.createElement("table")
-    var tr = document.createElement("tr")
-    table.appendChild(tr)
+    var tr = table.insertRow()
     table.classList.add("datatable")
 
     var th = document.createElement("th")

package/gluon-status-page/src/js/lib/gui/statistics.js

@@ -49,10 +49,11 @@ define(["lib/helper"], function (Helper) {
   }
 
   function mkTrafficRow(table, children, label, stream, selector) {
-    var tr = document.createElement("tr")
+    var tr = table.insertRow()
     var th = document.createElement("th")
-    var td = document.createElement("td")
     th.textContent = label
+    tr.appendChild(th)
+    var td = tr.insertCell()
 
     var traffic = stream.slidingWindow(2, 2)
     var pkts = streamNode(traffic.map(deltaUptime(selector + ".packets")).map(prettyPackets))
@@ -65,10 +66,6 @@ define(["lib/helper"], function (Helper) {
     td.appendChild(document.createElement("br"))
     td.appendChild(bytes)
 
-    tr.appendChild(th)
-    tr.appendChild(td)
-    table.appendChild(tr)
-
     children.push(pkts)
     children.push(bw)
     children.push(bytes)