javascript 数组 遍历成table

Question

如果将一个多维数组遍历成一个table？

`var arr = [{id: "1",name:"11",comment:"1"},{id: "2",name:"22",comment:"22"},{id: "333",name:"333",comment:"333"}];

最终效果是如下图

Answer 1

这真的不是我想说的。`// 首先，我们将你的对象 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]);
    }
    
}

`
试一试？

Answer 2

给你写个

 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

实际效果

Answer 3

这是一个简单的数据渲染到视图的问题，建议你使用vue等数据双向绑定的框架，代码非常简洁

<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>