body代码

 <table>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
    </thead>
    <tbody>
       // <tr>
            //<th>1</th>
            //<th>张三</th>
            //<th>男</th>
            //<th>17</th>
            //<th>2</th>
       // </tr>
    </tbody>
</table>

需求:

1. 接收到后端给到的数据
2. 将数据渲染到页面

步骤

1. 写一个数组, 模拟接收到了后端给到的数据

    var users = [
        {
            id: 1,
            name: '张三',
            age: 67,
            gender: '男',
            classRoom: '2XX'
        },
        {
            id: 2,
            name: '李四',
            age: 66,
            gender: '女',
            classRoom: '2XX'
        },
        {
            id: 3,
            name: '王五',
            age: 18,
            gender: '男',
            classRoom: '2XX'
        }
    ]

2. 将数据渲染到页面

思路:

1. 将数组内的数据, 转换为我们需要的字符串
2. 通过 innerHTML 插入到页面渲染出来

`` 包裹起来的内容和 '' 包裹起来的一样, 都是一个字符串

两者的区别:

1. ``可以换行, ''不能换行
2. `` 内部 书写 ${} 这个大括号内部可以书写变量

2.0 获取元素

    var tBodyEle = document.querySelector('tbody')
    

2.1 将数组内的数据, 转换为我们需要的字符串

    var str = ''
    users.forEach(function (item) {
        // console.log(item)
        // str += '<tr><td>1</td><td>张三1</td><td>男</td><td>67</td><td>2XX</td></tr>'
        str += `<tr>
            <td> ${item.id} </td>
            <td> ${item.name} </td>
            <td> ${item.gender} </td>
            <td> ${item.age} </td>
            <td> ${item.classRoom} </td>
        </tr>`
    })

2.2 通过 innerHTML 插入到页面渲染

    tBodyEle.innerHTML = str