做一个可选择的HTML表格作为值的对象

Question

我一直在试图创建一个由对象填充的html表格。

该表应该可以按行选择（通过悬停），当该行悬停在函数ran上时。

表头是在阵列中：

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

所有的数据都坐在里面阵列，

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

我试图修改的示例片的代码，但它是非常困难的将其概念化并将其置于程序化解决方案中。将这些数据直接映射到交互式表格的简便方法是什么？

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(); 
}