Katserbot Katserbot - 4 months ago 14
CSS Question

Make a selectable html table with objects as values

I am been trying to create a html table that is populated by objects.

The table was supposed to be selectable by row (via hover), when the row was hovered over a function ran.

The table headers are in an array:

var topTitles = ["Type","Origin","Destination","T","A","G"];


all the data are sitting inside arrays,

var Type = [];
var Origin = [];
var Destination = [];
var T = [];
var A = [];
var G = [];


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.

function createTable() {
var table = document.getElementById('matrix');
var tr = addRow(table);

for (var j = 0; j < 6; j++) {
var td = addElement(tr);
td.setAttribute("class", "headers");
td.appendChild(document.createTextNode(topTitles[j]));
}
for (var i = 0; i < 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 < 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 < rows.length; i++) {
for (var j = 0; j < 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] + "<br/>" + destinations[j];
}
}
}

if (highlightedCell) {
highlightedCell.style.backgroundColor="#ffffff";
}
highlightedCell = document.getElementById('element-' + i + '-' + j);
highlightedCell.style.backgroundColor="#e0ffff";
showValues();
}

Answer

This is probably the easiest way I could think of building the table without changing your data structure and make it very clear where all the data is coming from. It is defiantly not the best code, but it should work for your situation.

CodePen

var topTitles = ["Type","Origin","Destination","T","A","G"];
var Type = ["Type1", "type2", "type3"];
var Origin = ["Origin1", "origin2", "origin3"];
var Destination = ["Destination1", "Destination2", "dest3"];
var T = ["t1", "t2","T3"];
var A = ["steaksauce", "a2", "a3"];
var G = ["G1", "G2", "G3"];
var appendString = [];
for(var i =0; i < topTitles.length; i++){
  if(!i){
    appendString.push("<tr><td>" + topTitles[i] + "</td>");
  }
  else if(i === topTitles.length -1){
    appendString.push("<td>" + topTitles[i] + "</td></tr>");
  }
else{
  appendString.push("<td>" + topTitles[i] + "</td>");
    }
}
for(var i =0; i < Type.length; i++){
    appendString.push("<tr><td>" + Type[i] + "</td><td>" + Origin[i] + "</td><td>" + Destination[i] + "</td><td>" + T[i] + "</td><td>" + A[i] + "</td><td>" + G[i] + "</td></tr>");     
}
var table = document.getElementById('table');
table.innerHTML = appendString.join('');
Comments