<p>Ich habe ein 2D-Array in meinem Javascript. Das Array wird der Variablen „arr“ zugewiesen und sieht folgendermaßen aus: </p> <pre class="brush:php;toolbar:false;">[ [ „0“, { cat_id: "1", Katzenname: „Tiger“, }, ], [ „1“, { cat_id: "2", Katzenname: „Löwe“, }, ], [ „2“, { cat_id: "3", Katzenname: „Gepard“, }, ], [ "3", { cat_id: "5", Katzenname: „Leopard“, }, ], ]</pre> <p>Ich möchte Benutzern eine übersichtliche HTML-Tabelle auf dem Bildschirm zur Verfügung stellen, mit Schlüsseln als Überschriften und Werten als Zeilen, wie folgt: </p> <table class="s-table"> <thead> <tr> <th>cat_id</th> <th>Katzenname</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger</td> </tr> <tr> <td>2</td> <td>Löwe</td> </tr> <tr> <td>3</td> <td>Gepard</td> </tr> <tr> <td>4</td> <td>Leopard</td> </tr> </tbody> </table> <p>Ich habe mir viele Artikel auf StackOverflow und im Internet angesehen, aber ich bin kein Javascript-Experte und kann ehrlich gesagt nichts zum Laufen bringen.非常感谢任何帮助！</p> <p>我的HTML中包含了空表格代码:</p> <p><br /></p> <pre class="snippet-code-js lang-js Prettyprint-override"><code>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 (Zeileninstanz des Arrays) { row.forEach(function (cell) { var newCell = document.createElement("td"); newCell.textContent = cell; newRow.appendChild(newCell); }); } anders { newCell = document.createElement("td"); newCell.textContent = row; newRow.appendChild(newCell); } });</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><table id="wrap"></table></code></pre> <p><br /></p> <p> <pre class="brush:php;toolbar:false;">0 [object Object] 1 [Objekt Objekt] 2 [Objekt Objekt] 3 [Objekt Objekt]</pre> < p>

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 = "";

const data = arr.map(a =>
  Object.entries(a[1]).sort(([a], [b]) => a.localeCompare(b))
);

const headerRow = document.createElement("tr");
tableBody.appendChild(headerRow);
for (const [key] of data[0]) {
  const newCell = document.createElement("td");
  newCell.textContent = key;
  headerRow.appendChild(newCell);
}

for (const datum of data) {
  const newRow = document.createElement("tr");
  tableBody.appendChild(newRow);
  for (const [, value] of datum) {
    const newCell = document.createElement("td");
    newCell.textContent = value;
    newRow.appendChild(newCell);
  }
}

<table id="wrap"></table>