动态渲染表格

意义:  根据一个数据(数组 / 对象), 把页面的 html 结构完成

1. 获取元素

          => tbody 标签: 因为最终组装完毕的内容需要填充到 tbody 标签内

2. 把 userList 数组转换成 html 格式的字符串

          => 需要多少个 tr ?

          => 数组的 length 是多少, 就是多少个 tr

          => 遍历 数组, 生成 tr

          => 每一个 tr 内需要多少个 td ?

          => 遍历 每一个 对象, 生成 td

          => 在 td 开合标签中间加上文本内容

3. 在循环遍历结束以后

          => 把 str 填充到 tbody 内部

---

// 0. 要准备好一个数据
let userList = [
  { id: 1, name: 'Jack', age: 18, gender: '男' },
  { id: 2, name: 'Rose', age: 20, gender: '女' },
  { id: 3, name: 'Tom', age: 22, gender: '男' },
  { id: 4, name: 'Jerry', age: 24, gender: '女' }
]

// 1. 获取元素
let tbody = document.querySelector('tbody')

// 2. 准备拼接字符串
let str = ''

userList.forEach(item => {
  // 这个函数执行多少回, 需要多少个 tr 标签
  str += `
    <tr>
      <td>
        <span>${ item.id }</span>
      </td>
      <td>
        <i>${ item.name }</i>
      </td>
      <td>
        ${ item.age }
      </td>
      <td>
        <h4>${ item.gender }</h4>
      </td>
    </tr>
  `
})

// 3. 填充内容
tbody.innerHTML = str