JS动态渲染表格

动态渲染表格 0.0

• 意义: 根据一个数据 (数组 / 对象), 把页面的 html 结构渲染完成
  ( 渲染页面就是通过 数据 把页面渲染出来, 页面中的大部分内容都是靠渲染上去的, 而不是真实写死在页面上的 )

分析数据:
+ 最外层是一个 数组 [ ]
=> 数组 表示了表格内的所有数据
1: 一个表格有多少个 tr 标签
=> 由 数组内 有多少个 对象 { } 来决定
=> 一个 对象 对应一个 tr 标签
2: 一个 tr 内有多少个 td 标签
=> 由 对象内 有多少个 成员 key 就是多少个 td 标签
=> 一个 成员 对应一个 td 标签
3: 把数组反应成为一个页面上的内容
=> 利用 innerHTML 来渲染页面
=> 因为这个属性可以识别和解析 html 结构
=> 我们只要把 userList 这个数组变成一个 html 结构的字符串

代码实现:
1. 获取元素
=> tbody 标签: 因为最终组装完毕的内容需要填充到 tbody 标签内
2. 把 userList 数组转换成 html 格式的字符串
=> 需要多少个 tr ?=> 数组的 length 是多少, 就是多少个 tr
=> 循环遍历 数组 , 生成 tr
=> 每一个 tr 内需要多少个 td ? => 循环遍历 每一个 对象, 生成 td
=> 在 td 开合标签中间加上文本内容 item[key]
3. 在循环遍历结束以后
=> 把 str 填充到 tbody 内部

HTML 结构

<table border="1" cellspacing="0">
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <!-- js 渲染 -->
      <!-- <tr>
        <td>1</td>
        <td>张思瑞</td>
        <td>18</td>
        <td>女</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王五</td>
        <td>22</td>
        <td>男</td>
      </tr> -->
    </tbody>
  </table>

CSS 样式

<style>
    /* 
    ( 我们需要渲染表格的地方 :
      tbody 里面的东西 , 需要我们先把表格的样式调整好,
      比如说表格需要哪些元素, tr 设置的宽高, 表格内是否需要文本居中显示,
      表格内的字体大小颜色等等, 都得我们提前设置好了再利用 JS 渲染页面 )
     */
    * {
      margin: 0;
      padding: 0;
    }

    table {
      width: 500px;
      text-align: center;
      margin: 50px auto;
    }

    /* table > tbody > tr:nth-child(odd) {
      background-color: pink;
    }

    table > tbody > tr:nth-child(even) {
      background-color: skyblue;
    }

    table > tbody > tr:hover {
      background-color: #ccc;
    } */
  </style>

JS 交互

// 0 . 准备好一个数据 (userList), 利用这个数据把表格渲染完整
(以后可以向后端请求数据来进行页面渲染)

var 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 . 获取元素

var tbody = document.querySelector('tbody')

// 2 . 准备拼接字符串

// 2-1. 准备一个变量, 接受拼接结果
    var str = ''

    // 2-2. 循环遍历 userList
    userList.forEach(function (item) {
      // userList 内有多少个对象, 执行多少回
      // 有多少对象就需要多少个 tr 标签
      // 每执行一回, 向 str 身上拼接一个 tr
      str += '<tr>'

      // 2-3. 遍历每个对象 item, 根据 item 内的成员 key 来生成 td 标签
      for (var key in item) {
        // 对象内有多少个成员, 执行多少回
        // 有多少成员, 就需要多少个 td 标签
        // 每执行一次 拼接一个 td
        // 在 td 开合标签中间加上文本内容 item[key]
        str += '<td>' + item[key] + '</td>'
      }

      str += '</tr>'
    })

// 3. 填充内容

tbody.innerHTML = str

动态渲染表格 1.0

• 0.0 内的步骤 2 并不友好 , 接下来用模板字符串进行优化

知识点: 模板字符串
=> JS 定义字符串的一种方式
=> 只不过是使用 反引号(``) 来定义
=> 区别:
1. 反引号 定义的字符串 可以换行书写
2. 可以直接在字符串内解析变量
+ 当你需要解析变量的时候, 直接书写 ${变量}

<script>
    // 0. 要准备好一个数据
    var 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. 获取元素
    var tbody = document.querySelector('tbody')

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

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

    // 3. 填充内容
    tbody.innerHTML = str
  </script>