javascript 數(shù)組 遍歷成table

給你寫個(gè)

 var arr = [{id: "1",name:"11",comment:"1"},{id: "2",name:"22",comment:"22"},{id: "333",name:"333",comment:"333"}];
var str=`
        <table border="4">
            <thead>
                <tr>
                    <th>id</th><th>name</th><th>comment</th></tr>
            </thead>
            <tbody>
            ${
                arr.map(o => {
                    return `<tr>
                                <td>${o.id}</td>
                                <td>${o.name}</td>
                                <td>${o.comment}</td>
                            </tr>`
                }).join('')
            }
            </tbody>
         </table>
         `
document.querySelector('#table-wrap').innerHTML=str

實(shí)際效果

這是一個(gè)簡(jiǎn)單的數(shù)據(jù)渲染到視圖的問(wèn)題，建議你使用vue等數(shù)據(jù)雙向綁定的框架，代碼非常簡(jiǎn)潔

<table>
  <thead>
    <tr>
      <td>id</td>
      <td>name</td>
      <td>comment</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in arr">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.comment }}</td>
    </tr>
  </tbody>
</table>
<script>
  var table = new Vue({
    el:"#table",
    data:{
      arr:[{id: "1",name:"11",comment:"1"},{id: "2",name:"22",comment:"22"},{id: "333",name:"333",comment:"333"}]
    }
  })
</script>

這真的不是我想說(shuō)的。`// 首先，我們將你的對(duì)象 arr

var len = arr.length;
for(var i = 0 ;i < len;i++){
    for(var key in arr[i]){
        console.log(key);
        console.log(arr[i][key]);
    }
    
}

`
試一試？