Javascript 创建一个可选择的html表，将对象作为值

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

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

表格标题位于一个数组中：

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

函数createTable（）{
var table=document.getElementById（'matrix'）；
var tr=addRow（表）；
对于（var j=0；j<6；j++）{
var td=加法（tr）；
td.setAttribute（“类”、“头”）；
td.appendChild（document.createTextNode（topTitles[j]）；
}
对于（变量i=0；i”+destinations[j]；
}
}
}
if（高亮显示单元格）{
highlightedCell.style.backgroundColor=“#ffffff”；
}
highlightedCell=document.getElementById（'element-'+i+'-'+j）；
highlightedCell.style.backgroundColor=“#e0ffff”；
showValues（）；
}

这可能是在不更改数据结构的情况下构建表的最简单方法，并且可以非常清楚地说明所有数据的来源。这显然不是最好的代码，但它应该适合您的情况

var topTitles=[“类型”、“来源”、“目的地”、“T”、“A”、“G”]；
变量类型=[“类型1”、“类型2”、“类型3”]；
var Origin=[“Origin1”、“origin2”、“origin3”]；
变量Destination=[“Destination1”、“Destination2”、“dest3”]；
变量T=[“t1”、“t2”、“T3”]；
风险值A=[“斯蒂克绍克”、“a2”、“a3”]；
变量G=[“G1”、“G2”、“G3”]；
var appendString=[]；
对于（变量i=0；i

HTML Table元素（）表示表格数据，感谢@JD E的清晰示例，但是如何实现突出显示效果呢？我希望突出显示一个单元格，然后运行ShowValue（）函数您可以让每个td元素都有onmouseover事件

，这意味着您可以编写一个函数

函数hightlightAndShowValue（）{this.className+=“highlightclass”；ShowValue（）；}

，当然我们想在这之后进行清理<代码>函数RemoveHighlight（）{this.className=”“；}这可能是一个更好的remove类函数

function RemoveClass（）{this.className=this.className.replace（“highlight”，“”）；}

我非常感谢您的解释，但是我很难将highlight和mouse-over函数实现到您的整个代码中。请您更新您的答案，将其也包含在您的代码笔中。非常感谢。

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