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

Question

我有一个用 Javascript 生成的表，它输出一些 JSON 数据。现在我知道我可能不应该重复这么多，但是这个数组的一个元素需要包含在一个链接中，而且我不知道如何编写一个循环来输出所有成员，但还有一些样式的成员。有没有办法在循环中执行此操作，同时保持此代码给出的输出格式？表头部分已经处理好了， tbody 是我遇到问题的地方：因为你的最后一个元素不完全适合循环。指的是我在循环中遇到的这个问题。

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>' ;
}

标签： javascripthtmljson

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

});