Javascript를 사용하여 2D 배열을 HTML 테이블로 변환
<p>Javascript에 2D 배열이 있습니다. 배열은 'arr' 변수에 할당되며 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">[
[
"0",
{
cat_id: "1",
cat_name: "호랑이",
},
],
[
"1",
{
cat_id: "2",
cat_name: "사자",
},
],
[
"2",
{
cat_id: "3",
cat_name: "치타",
},
],
[
"삼",
{
cat_id: "5",
cat_name: "표범",
},
],
]</pre>
<p>다음과 같이 키를 헤더로, 값을 행으로 사용하여 화면에 깔끔한 HTML 테이블을 사용자에게 제공하고 싶습니다. </p>
<테이블 클래스="s-테이블">
<머리>
<tr>
<번째>cat_id
<th>cat_name</th>
</tr>
</머리>
<본문>
<tr>
<td>1</td>
<td>타이거</td>
</tr>
<tr>
<td>2</td>
<td>사자</td>
</tr>
<tr>
<td>3</td>
<td>치타</td>
</tr>
<tr>
<td>4</td>
<td>레오파드</td>
</tr>
</tbody>
</테이블>
<p>StackOverflow와 웹에서 많은 기사를 살펴봤지만 저는 Javascript 전문가가 아니고 솔직히 아무것도 작동할 수 없습니다.不常感谢任何帮助！</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: "호랑이", },], ["1", { cat_id: "2", cat_name: "사자", },], ["2", { cat_id: "3", cat_name: "치타", },], ["3", { cat_id: "5", cat_name: "표범", },],]
var tableBody = document.getElementById("wrap");
tableBody.innerHTML = "";
arr.forEach(함수 (행) {
var newRow = document.createElement("tr");
tableBody.appendChild(newRow);
if(배열의 행 인스턴스) {
row.forEach(함수 (셀) {
var newCell = document.createElement("td");
newCell.textContent = 셀;
newRow.appendChild(newCell);
});
} 또 다른 {
newCell = document.createElement("td");
newCell.textContent = 행;
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>因为arr是一个二维数组，所以我的代码目前只会产生以下表格：</p>
<pre class="brush:php;toolbar:false;">0 [객체 객체]
1 [객체 객체]
2 [객체 객체]
3 [객체 객체]</pre>
<p>我명백<em>为什么</em>会发生这种情况，但我的JS수평불足以实现我想要的结果。</p>
