通过 DOM 操作 实现选项卡功能 渲染表格 => 将数组中的数据 用表格的形式显示

通过 DOM 操作 实现选项卡功能

功能实现：
    点击导航显示该部分的内容  其他部分的内容不可见  没有点击时 默认显示

// css 部分
     * {
            padding: 0;
            margin: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .header {
            width: 600px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            display: flex;
        }

        .header li {
            width: 200px;
        }

        .content {
            width: 600px;
            height: 400px;
            line-height: 400px;
            text-align: center;
        }

        .header .active {
            background-color: aquamarine;
        }

        .content li {
            display: none;
            font-size: 50px;
        }

        .content .active {
            display: block;
            background-color: orange;
        }

// html 部分：
    <ul class="header">
        <li>header_1</li>
        <li class="active">header_2</li>
        <li>header_3</li>
    </ul>
    <ol class="content">
        <li>content_1</li>
        <li class="active">content_2</li>
        <li>content_3</li>
    </ol>

// js 部分：
        var headerLi = [...document.querySelectorAll('.header li')]; // 获取header下的所有li
        var contentLi = [...document.querySelectorAll('.content li')]; // 获取content下的所有li

        // header 
        headerLi.forEach(function(item,index){  // 拿到头部的所有的li
            item.onclick = function(){  // 给头部的li添加点击事件
                headerLi.forEach(function(li,liIndex){ // 消除头部 内容部分所有li的属性
                    li.classList.remove('active');
                    contentLi[liIndex].classList.remove('active');

                })
                item.classList.add('active');  // 给点击的哪一个添加属性
                contentLi[index].classList.add('active');
            }
        })

渲染表格 => 将数组中的数据 用表格的形式显示

 /**
         *  需求:
         *      1. 接收到后端给到的数据
         *      2. 将数据渲染到页面
*/


// html结构：
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <!-- 使用 JS 渲染 -->
            <!-- <tr>
                <td>1</td>
                <td>Jack</td>
                <td>男</td>
                <td>18</td>
                <td>2XX</td>
            </tr> -->
        </tbody>
    </table>

        var users = [
            { id: 1, name: 'Jack', age: 18, gender: '男', classRoom: '2XX' },
            { id: 2, name: 'Rose', age: 20, gender: '女', classRoom: '2XX' },
            { id: 3, name: 'Jerry', age: 22, gender: '男', classRoom: '2XX' },
            { id: 4, name: 'Tom', age: 24, gender: '男', classRoom: '2XX' }
        ]   
        
        var tbody = document.querySelector('tbody'); // 获取tbody表格
        console.log(tbody);

        // 方法1:
        var str = ''; //定义一个空字符串 用于存储从数组中接收到的数据

        users.forEach(function(item){  //通过循环拿到 数组中每一个数据
            // 将数据存储在空字符串中 
            str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                    <td>${item.classRoom}</td>
                </tr>
            `
        })
        tbody.innerHTML = str;    // 将拿到的数据渲染到页面中

        var users = [
            { id: 1, name: 'Jack', age: 18, gender: '男', classRoom: '2XX' },
            { id: 2, name: 'Rose', age: 20, gender: '女', classRoom: '2XX' },
            { id: 3, name: 'Jerry', age: 22, gender: '男', classRoom: '2XX' },
            { id: 4, name: 'Tom', age: 24, gender: '男', classRoom: '2XX' }
        ]  
        
        // 方法2:
        var str = users.reduce(function(prev,item){  
            return prev +      // 返回数组中所有的数据
                            `<tr>
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.age}</td>
                                <td>${item.gender}</td>
                                <td>${item.classRoom}</td>
                            </tr>
                        `
        },'')
        tbody.innerHTML = str;   // 将拿到的数据渲染到页面中