title: Make a selectable html table with objects as values
body: <p>I am been trying to create a html table that is populated by objects. </p>
  
  <p>The table was supposed to be selectable by row (via hover), when the row was hovered over a function ran.</p>
  
  <p>The table headers are in an array:</p>
  
  <pre><code>var topTitles = ["Type","Origin","Destination","T","A","G"];
  </code></pre>
  
  <p>all the data are sitting inside arrays, </p>
  
  <pre><code>var Type = [];
  var Origin = [];
  var Destination = [];
  var T = [];
  var A = [];
  var G = [];
  </code></pre>
  
  <p>I tried to modify an example piece of code, but it was very difficult to conceptualize it and place it into a programatic solution. What is an easy way to map such data directly into a interactive table.</p>
  
  <pre><code>function createTable() {
    var table = document.getElementById('matrix');
    var tr = addRow(table);
  
    for (var j = 0; j &lt; 6; j++) {
      var td = addElement(tr);
      td.setAttribute("class", "headers");
      td.appendChild(document.createTextNode(topTitles[j]));
    }
    for (var i = 0; i &lt; origins.length; i++) {
      var tr = addRow(table);
      var td = addElement(tr);
      td.setAttribute("class", "origin");
      td.appendChild(document.createTextNode(mode[i]));
      for (var j = 0; j &lt; topTitles.length; j++) {
        var td = addElement(tr, 'element-' + i + '-' + j);
        td.onmouseover = getRouteFunction(i,j);
        td.onclick = getRouteFunction(i,j);
      }
    }
  }
  function populateTable(rows) {
    for (var i = 0; i &lt; rows.length; i++) {
      for (var j = 0; j &lt; rows[i].elements.length; j++) {
        var distance = rows[i].elements[j].distance.text;
        var duration = rows[i].elements[j].duration.text;
        var td = document.getElementById('element-' + i + '-' + j);
        td.innerHTML = origins[i] + "&lt;br/&gt;" + destinations[j];
      }
    }
  }
  
  if (highlightedCell) {
    highlightedCell.style.backgroundColor="#ffffff";
  }
  highlightedCell = document.getElementById('element-' + i + '-' + j);
  highlightedCell.style.backgroundColor="#e0ffff";
  showValues();
  }
  </code></pre>