动态渲染表格

注意几点：

- 先静态后动态，
- 先遍历获取数据
- 最后打印在页面中。

先写静态h5页面

     <!-- <table>
        <caption>、
           <h3>表格信息</h3>
        </caption>
        <thead>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
        </tbody>
    </table> -->

css部分

<style>
        table{
            width: 500px;
            /* height: 400px;  这里高度不能写死，因为我们不知道用户传入多少条数据 */
            margin: 100px auto;
            border: 1px solid #ccc;
            border-collapse: collapse;
            text-align: center;
        }
          th{
            background-color: #999;
        }
        th,td{
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>

静态h5与css效果图：

<script>
        // 通过js的方式创建表格
        // 定义一个存储了若干学生信息的数组
        // info存储的就是用户输入的数据
        let info = [                { number: 1, name: '小明', age: 18, gender: '男', address: '上海' },                { number: 1, name: '小王', age: 18, gender: '男', address: '深圳' },                { number: 1, name: '小津', age: 18, gender: '男', address: '南京' },                { number: 1, name: '小安', age: 18, gender: '女', address: '长沙' },                { number: 1, name: '小陈', age: 18, gender: '男', address: '武汉' },                { number: 1, name: '小的', age: 18, gender: '女', address: '北京' },                { number: 1, name: '小啊', age: 18, gender: '男', address: '广州' }            ]

       // 通过JS先把表头不动的部分先渲染加载出来
        //  document.write()打印在页面
         document.write(`<table>
                        <caption>、
                           <h3>表格信息</h3>
                        </caption>
                        <thead>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>家乡</th>
                        </thead>`)
         // 根据后台传回的数据 进行遍历动态的追加到页面中
        // 遍历数组需要使用for循环 
        for (let i = 0; i < info.length; i++) {
           // console.log(info[i]);控制台返回 Object 遍历成功
           // 想访问 数组中每一项的姓名
           console.log(info[i].name) 
        document.write(`
                      <tbody>
                      <tr>
                          <td>${i+1}</td>
                          <td>${info[i].name}</td>
                          <td>${info[i].age}</td>
                          <td>${info[i].gender}</td>
                          <td>${info[i].address}</td>
                      </tr>`)     
        }
        
        // 把table的结束标签也要渲染在页面上
        
        document.write(`</tbody>
                 </table>`)
                 
         //把h5的结构注释
                        
    </script>

补充部分： console.log(info[i].name)在控制台打印：

console.log(info[i].name)在控制台打印：

最后的效果图为：

总结：

动态渲染：首先写静态，再完成动态，遍历数据，打印在页面中，可以看出info.[i].name、info.[i].age、info.[i].gender等,就是我们需要的的数据信息，那我们可以将这些数据以模板字符的方式插入到单元格里，就可以形成动态表格了。

结语：

初次写博客望各位大佬指正。。。

动态渲染表格案例

动态渲染表格

先写静态h5页面

总结：

结语：