如何创建一个 html 表格来显示具有不同字段的对象数组？答案

【问题标题】：How to create an html table to display an array of objects with not the same fields?如何创建一个 html 表格来显示具有不同字段的对象数组？
【发布时间】：2020-05-09 16:40:58
【问题描述】：

我有一个对象数组，其中的字段可能略有不同。

由于对象中没有相同的字段而构建表时，我的表会缩小如何制作一个表格，以便在没有字段的地方有一个空行。

各位同事，请告诉我如何正确完成这项任务。

你只能使用纯 javascript

const data = [
      {
      "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Died Location": "Munich, Germany",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Died Location": "Munich, Germany",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Gender": "male",
    "Prizes": "yes"
    }
]

const keys = Object.keys(data[0])

let tab = document.createElement('table');

const buildTableHeader = () => {
    let thead = document.createElement('thead');
    let tr = document.createElement('tr');

    for (const key of keys) {
        const th = document.createElement("th");
        th.appendChild(document.createTextNode(key));
        tr.appendChild(th);
    }
    thead.appendChild(tr)
    tab.appendChild(thead);

    document.body.appendChild(tab)
}

let tb = document.createElement('tbody');

const buildTableBody = () => {
    for (let a of data) {
        let tr = document.createElement('tr');
        for (let key in a) {
            let td = document.createElement('td');
            let tn = document.createTextNode(a[key]);
            td.appendChild(tn);
            tr.appendChild(td);
        }
        tb.appendChild(tr);
    }
    tab.appendChild(tb);
    document.body.appendChild(tab);
}

buildTableHeader()
buildTableBody()

【问题讨论】：

标签： javascript dom html-table

【解决方案1】：

const buildTableBody = () => {
    for (let a of data) {
        let tr = document.createElement('tr');
        for(let key of keys) {
            let td = document.createElement('td');
            let tn = document.createTextNode(a[key]);
            td.appendChild(tn);
            tr.appendChild(td);
        }
        tb.appendChild(tr);
    }
    tab.appendChild(tb);
    document.body.appendChild(tab);
}

将 for (let key in a) 更改为 for(let key of keys)

【讨论】：

【解决方案2】：

当某些属性不存在时，您正在尝试迭代数据。如果您迭代您的密钥，您可以检查您拥有的任何密钥是否在您的数据对象中。如果他们不只是创建一个空的 tn。

const buildTableBody = () => {
    for (let a of data) {
        let tr = document.createElement('tr');
        keys.forEach((key) => {
            let td = document.createElement('td');
            let tn = key in a ? document.createTextNode(a[key]) : document.createTextNode('');
            td.appendChild(tn);
            tr.appendChild(td);
        });
        tb.appendChild(tr);
    }
    tab.appendChild(tb);
    document.body.appendChild(tab);
}

【讨论】：