如何使用 js table 將數據從 json 顯示為 HTML

Question

如何將此代碼插入到 js 表中

if (data.players.length) {data.players.forEach((ply)=>{
            
            let plycont = document.createElement('div')
            
            
            let plyspan = generate_colored_span(ply.name)
            plyspan.className = 'tracker_plyname'
            plycont.appendChild(plyspan)
            
            plycont.appendChild(wrap_span(ply.score, 'tracker_plyscore'))
            
            plycont.appendChild(wrap_span(ply.ping == '0' ? 'BOT' : ply.ping, 'tracker_plyping'))
            tracker_playerslist.appendChild(plycont)
        })} 

我要使用的 JSON api 數據："players":[ { "name":"", "score":"", "ping":"" }]

HTML 輸出：

<table class="table">
  <thead>
    <tr>
      <th>Players</th>
      <th>Score</th>
      <th>Ping</th>
    
    </tr>
  </thead>
  <tbody></tbody>
  </table>

Answer 1

您可以創建創建表和

 const addRow = (el, data) => { if (data.length) { data.forEach((ply) => { const row = document.createElement("tr"); row.innerHTML = ` <td>${ply.name}</td> <td>${ply.score}</td> <td>${ply.ping}</td> `; el.appendChild(row); }); } }; const table = document.querySelector("tbody"); const data = [ { name: "Player 1", score: "100", ping: "100", },{ name: "Player 2", score: "200", ping: "200", } ]; addRow(table, data);

 td { padding: 4px 24px; }

 <table class="table"> <thead> <tr> <th>Players</th> <th>Score</th> <th>Ping</th> </tr> </thead> <tbody></tbody> </table>