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

我有两种类型的数组

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

函数循环数组（arr1、arr2）{
$。每个（arr1，功能（i）{
var templateString=''
+arr2[arr1[i]]。名称+“”
+arr2[arr1[i].职业+
+arr2[arr1[i].年龄+''；
$（'#test'）.append（templateString）；
})
}

调用这个函数

这是我得到的结果

---

我想知道是否有方法将标题姓名、职业和年龄添加到表中，以及是否有更好的方法输出表。感谢您的帮助。

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

此API提供了表元素和行元素上的方法，可按如下所示使用：

var arr1=[“迈克”，“约翰”]；
var arr2=[{丹：{姓名：“丹·布朗”，职业：“警官”，年龄：25}，约翰：{姓名：“约翰·布莱克”，职业：“学生”，年龄：20}，迈克：{姓名：“迈克·弗洛斯”，职业：“学生”，年龄：19}]；
/*创建表元素*/
const table=document.createElement（'table'）；
/*创建header元素并插入行*/
const header=table.createTHead（）.insertRow（）；
/*用标题单元格标签填充表格标题*/
header.insertCell（0.innerText='Name'；
header.insertCell（1.innerText='occulation'；
header.insertCell（2.innerText='Age'；
/*创建主体元素并插入到表中*/
const body=document.createElement（'tbody'）；
表2.儿童（身体）；
arr1.forEach（person=>{
arr2.forEach（项目=>{
常数数据=项目[人]；
如果（！数据）{
返回；
}
/*如果arr2中存在关键人员的数据，则
将行插入到具有相应
数据项*/
const row=body.insertRow（）；
row.insertCell（0）.innerText=data.name；
row.insertCell（1）.innerText=data.occulation；
row.insertCell（2）.innerText=data.age；
});
});
/*将表追加到测试div*/
document.getElementById（'test'）.appendChild（表）
表格thead{
背景：粉红色；
}
表td{
填充：0.1rem；
}
使用object.keys（arr2[i]）来获取内部对象的标题文本-将它们转换为变量或数组，可用于给出第个标题文本。构造表的更好方法是使用
节点
元素，而不是将HTML视为纯字符串。这允许您通过追加或预加将节点插入到其他节点中。我仍然是一个javascript noob，所以请确定我是否应该进入学习节点以及所有这些：（.在学习更多高级库之前，我想先学习一些基本的javascript知识。@djfdev指的是DOM节点，而不是node.js。我非常同意他的观点；如果你想学习js，就不要依赖jQuery，自己去了解DOM。是的，正如@BlueWater86所说，我指的是DOM节点。也就是说，你可以使用c当然，使用jQuery选择器也可以做同样的事情……实际上，这只是把DOM看作一个树结构，而不是一个大的连接字符串。这个答案+1。我真的不知道这个API甚至存在到现在。这要归咎于我在整个前端工作中大量使用React哈哈。