我的 Javascript 中有一个 2D 数组。该数组被分配了变量“arr”，如下所示：
[
[
"0",
{
cat_id: "1",
cat_name: "Tiger",
},
],
[
"1",
{
cat_id: "2",
cat_name: "Lion",
},
],
[
"2",
{
cat_id: "3",
cat_name: "Cheetah",
},
],
[
"3",
{
cat_id: "5",
cat_name: "Leopard",
},
],
]
我想在屏幕上为用户提供一个简洁的 HTML 小表格，键是标题，值是行，因此：
| 猫_id | 猫名 |
|---|---|
| 1 | 老虎 |
| 2 | 狮子 |
| 3 | 猎豹 |
| 4 | 豹子 |
我一直在查看 StackOverflow 和网络上的许多文章，但我不是 Javascript 专家，老实说，我无法让任何东西发挥作用。非常感谢任何帮助！
我的 HTML 包含空表代码：
const arr = [["0", { cat_id: "1", cat_name: "Tiger", },], ["1", { cat_id: "2", cat_name: "Lion", },], ["2", { cat_id: "3", cat_name: "Cheetah", },], ["3", { cat_id: "5", cat_name: "Leopard", },],]
var tableBody = document.getElementById("wrap");
tableBody.innerHTML = "";
arr.forEach(function (row) {
var newRow = document.createElement("tr");
tableBody.appendChild(newRow);
if (row instanceof Array) {
row.forEach(function (cell) {
var newCell = document.createElement("td");
newCell.textContent = cell;
newRow.appendChild(newCell);
});
} else {
newCell = document.createElement("td");
newCell.textContent = row;
newRow.appendChild(newCell);
}
});<table id="wrap"></table>因为 arr 是一个二维数组，所以现在我的代码只是将其生成为表格：
0 [object Object]
1 [object Object]
2 [object Object]
3 [object Object]
我理解为什么会发生这种情况，但我的 JS 根本不足以获得我想要实现的结果。
这是工作示例：
let arr = [
[
"0",
{
id: "1",
name: "ABC",
},
],
[
"1",
{
id: "2",
name: "DEF",
},
],
[
"2",
{
id: "3",
name: "TEST",
},
],
[
"3",
{
id: "5",
name: "SOME",
},
],
];
let tableId = document.getElementById("table1");
arr.map((elem) => insertRow(tableId, elem[1]));
function insertRow(tableId, colVal) {
//way to insert at last row
var row = tableId.insertRow(-1);
//first cell (column)
var cell1 = row.insertCell(0);
//seconds cell (column)
var cell2 = row.insertCell(1);
//coulumn text
cell1.innerHTML = colVal.id;
cell2.innerHTML = colVal.name;
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table id="table1">
<tr>
<th>Company</th>
<th>Contact</th>
</tr>
</table>
</body>
</html>