The javascript array is traversed to table

if you traverse a multi-dimensional array into a table? 

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

the final effect is as follows

Javascript
Mar.14,2021

that's really not what I'm talking about. `/ / first, we arr your object 

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

`
give it a try?

write you a 

 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('-sharptable-wrap').innerHTML=str

actual effect

this is a simple problem of rendering data to the view. It is recommended that you use a framework for bidirectional data binding such as vue. The code is very concise

. 
<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:"-sharptable",
    data:{
      arr:[{id: "1",name:"11",comment:"1"},{id: "2",name:"22",comment:"22"},{id: "333",name:"333",comment:"333"}]
    }
  })
</script>

Previous: Vue highCharts solid-gauge (dashboard) initialization has been reporting an error

Next: Formdata submission, prompting newline character problem

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu