使用HTML顯示錶格

Question

我想使用HTML以表格格式顯示以下內容。 您能否快速幫助使用HTML顯示此內容。 請在下面的示例表內容找到。

Name | Count 
------------ 
X1 | 6 
X2 | 3 

Answer 1

閱讀代碼，如果你什麼都不懂，請隨時詢問。

只是一個說明..你可以追加每行和單元.appendChild什麼的。我之所以通過構建一個字符串並將其附加到最後，是因爲DOM操作很繁瑣，所以我寧願只做一次，而不是每一行和單元格。明白了嗎？

var jsonResponse = '[ { "name": "x16", "count": "x23" } ]'; 
 
var json = JSON.parse(jsonResponse); 
 

 
var output = ''; 
 
for (var i = 0; i < json.length; i++) { 
 
    output += '<tr><td>' + json[i].name + '</td><td>' + json[i].count + '</td></tr>'; 
 
} 
 

 
document.querySelector('tbody').innerHTML = output;

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Count</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>