Question

我一直在尝试创建一个由对象填充的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();
}

Answer 1

这可能是我想到的最简单的方法，可以在不改变数据结构的情况下构建表，并清楚地说明所有数据的来源。它绝对不是最好的代码，但它应该适用于您的情况。

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

创建一个可选的html表，其中对象为值

1 个答案: