1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         .box{
    9.             width: 500px;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <div class="box">
    16.     </div>
    18.     <script>
    19.         let users=[
    20.                 {
    21.                     id:1,
    22.                     name:"Lynn",
    23.                     age:18
    24.                 },
    25.                 {
    26.                     id:2,
    27.                     name:"Lynn",
    28.                     age:18
    29.                 },
    30.                 {
    31.                     id:3,
    32.                     name:"Lynn",
    33.                     age:18
    34.                 },
    35.                 {
    36.                     id:4,
    37.                     name:"Lynn",
    38.                     age:18
    39.                 }
    40.             ]
    42.         function init(){
    43.             //使用dom技术给box添加表格
    44.             let box=document.querySelector('.box');
    45.             let table=document.createElement('table');
    46.             // 将table元素添加到box
    47.             box.appendChild(table);
    49.             let thead=document.createElement('thead');
    50.             table.appendChild(thead);
    52.             let tr=document.createElement('tr');
    53.             thead.appendChild(tr);
    55.             let th=document.createElement('th');
    56.             th.appendChild(document.createTextNode('id'));
    57.             tr.appendChild(th);
    59.             th=document.createElement('th');
    60.             th.appendChild(document.createTextNode('姓名'));
    61.             tr.appendChild(th);
    63.             th=document.createElement('th');
    64.             th.appendChild(document.createTextNode('年龄'));
    65.             tr.appendChild(th);
    68.             let tbody=document.createElement('tbody');
    69.             table.appendChild(tbody);
    71.             for(let user of users){
    72.                 tr=document.createElement('tr');
    73.                 let td=null;
    74.                 for(let key in user){
    75.                     td=document.createElement('td');
    76.                     // user[key]--取出变量key这个属性所对应的值
    77.                     td.appendChild(document.createTextNode(user[key]));
    78.                     tr.appendChild(td);
    79.                 }
    80.                 tbody.appendChild(tr);
    81.             }
    82.         }
    84.         window.onload=function(){
    85.             init();
    86.         }
    87.     </script>
    88. </body>
    89. </html>