通过遍历对象数组来创建表

Question

我有两种类型的数组，

var arr1 = ["mike", "john"];
var arr2 = [{ 
    dan: {name: "dan brown", occupation: "police officer", age: 25},
    john: {name: "john blake", occupation: "student", age: 20},
    mike: {name: "mike floss", occupation: "student", age: 19}
    }];

我已经使用以下代码显示了表主体。

function loopArray(arr1, arr2) {
    $.each(arr1, function(i) {
        var templateString = '<table id="partstable" class="table table-hover"><tbody><tr><td class="name">' 
        + arr2[arr1[i]].name + '</td><td>' 
        + arr2[arr1[i]].occupation + '</td><td>'
        + arr2[arr1[i]].age + '</td>';
        $('#test').append(templateString);
    })
}

并调用此函数。

这是我得到的输出。

我想了解是否可以在表中添加标题名称，职业和年龄，以及是否有更好的输出表的方法。谢谢您的帮助。

Answer 1

动态表生成的另一种方法（不需要jQuery）是通过Table Element API，您可以使用它通过面向对象的接口从输入数据中动态构建表。

此API提供了诸如Table元素上的createTHead()，insertRow()和row元素上的insertCell()之类的方法，如下所示：

var arr1 = ["mike", "john"];
var arr2=[{dan:{name:"dan brown",occupation:"police officer",age:25},john:{name:"john blake",occupation:"student",age:20},mike:{name:"mike floss",occupation:"student",age:19}}];


/* Create table element */
const table = document.createElement('table');

/* Create header element and insert a row */
const header = table.createTHead().insertRow();

/* Populate table header with header cell labels */
header.insertCell(0).innerText = 'Name';
header.insertCell(1).innerText = 'Occupation';
header.insertCell(2).innerText = 'Age';

/* Create body element and insert to table */
const body = document.createElement('tbody');
table.appendChild(body);

arr1.forEach(person => {

  arr2.forEach(item => {

    const data = item[person];

    if (!data) {
      return;
    }

    /* If data present in arr2 for key person then 
    insert row into table body with corresponding 
    data entries */
    const row = body.insertRow();

    row.insertCell(0).innerText = data.name;
    row.insertCell(1).innerText = data.occupation;
    row.insertCell(2).innerText = data.age;
  });
});

/* Append table to test div */
document.getElementById('test').appendChild(table);

table thead {
  background:pink;
}

table td {
  padding:0.1rem;
}

<div id="test"></div>