JS 案例之渲染表格需求： 1.接收到后端给到的数据 2.将数据渲染到页面 JS 案例之渲染表格 JS 案例之渲染表格

需求：

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

<html>
<body>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>67</td>
        <td>2XX</td>
      </tr> -->
    </tbody>
  </table>

  <script>

    // 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'      }    ]

    // 0. 获取元素
    var tBodyEle = document.querySelector('tbody')

    // 1.将数组内的数据，转换为我们需要的字符串
    var str = ''
    users.forEach(function (item) {
      // console.log(item)
      str += `<tr>
      <td> ${item.id} </td>
      <td> ${item.name} </td>
      <td> ${item.gender} </td>
      <td> ${item.age} </td>
      <td> ${item.classRoom} </td>
    </tr>
      `
      // console.log(str)
    })

    // 2.通过innerHTML 插入到页面渲染出来
    tBodyEle.innerHTML = str

  </script>
</body>
</html>