javascript - 将 html 表数据转换为在 javascript 循环中运行

Question

我有一个用 Javascript 生成的表，它输出一些 JSON 数据。现在我知道我可能不应该重复太多，但是这个数组的一个元素需要包装在一个链接中，而且我不知道如何编写一个循环来输出所有成员，但也输出具有某种样式的成员。有没有办法在循环中执行此操作，同时保持此代码给出的输出格式？ 表头部分已经处理完毕，tbody 是我遇到问题的地方:正如您最后一个元素不完全适合循环一样。引用this problem我把它循环起来的地方。

for (let j= 0; j< filtered.length; j++){
  var row = table.insertRow(1); 
  row.classList.add("headRow")
  var cell0 = row.insertCell(0);
  cell0.innerHTML = filtered[j].Carat;
  var cell1 = row.insertCell(1);
  cell1.innerHTML = filtered[j].Color;
  var cell2 = row.insertCell(2);
  cell2.innerHTML = filtered[j].Shape;
  var cell3 = row.insertCell(3);
  cell3.innerHTML = filtered[j].Cut;
  var cell4 = row.insertCell(4);
  cell4.innerHTML = filtered[j].Symmetry;
  var cell5 = row.insertCell(5);
  cell5.innerHTML = filtered[j].Report;
  var cell6 = row.insertCell(6);
  cell6.innerHTML = filtered[j].Clarity;
  var cell7 = row.insertCell(7);
  cell7.innerHTML = filtered[j].Polish;
  var cell8 = row.insertCell(8);
  cell8.innerHTML =  '<a href="' + filtered[j].link_view + '"> View</a>' ;
}

Answer 1

您可以尝试创建一个配置对象，其中包含将在每行显示的属性以及将用于确定数据如何显示的渲染器函数。

以下是一个简单示例:

var renderer = {
    text: function(data) {
        return data;
    },
    link: function(data) {
        return '<a href="' + data + '">View</a>';
    }
};

var config = [
    {attr: "Carat", renderer: renderer.text},
    {attr: "Color", renderer: renderer.text},
    {attr: "Shape", renderer: renderer.text},
    {attr: "Cut", renderer: renderer.text},
    {attr: "Symmetry", renderer: renderer.text},
    {attr: "Report", renderer: renderer.text},
    {attr: "Clarity", renderer: renderer.text},
    {attr: "Polish", renderer: renderer.text},
    {attr: "link_view", renderer: renderer.link}
];

filtered.forEach(function(data) {

    var row = document.createElement("tr");

    config.forEach(function(entry) {

        var cell = document.createElement("td"),
            value = data[entry.attr];

        cell.innerHTML = entry.renderer(value);

        row.appendChild(cell);

    });

    table.appendChild(row);

});