DOM应用

咕咕来砸米

已于 2023-06-16 01:20:12 修改

阅读量226

点赞数

分类专栏： javascript 文章标签： html css javascript

于 2023-04-27 12:19:53 首次发布

本文链接：https://blog.csdn.net/qq_51357129/article/details/130403834

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、制作一个具有分页功能的表格组件。

2、要求不使用框架。

效果图:

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>

<body>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
            margin: 0px auto;
        }

        table tr th {
            border-bottom: 2px gray solid;
            padding: 20px;
        }

        table tr td {
            border-bottom: 1px gray solid;
            padding: 10px;
        }
        div#pagination{
            text-align: center;
            margin: 10px auto;
        }
        div#pagination button{
            margin: 0px 5px;
            padding: 0px 10px;
        }
    </style>
    <table id="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <!--填充数据-->
        </tbody>
    </table>
    <div id="pagination"></div>
    <script>
        const table = document.getElementById('table');
        const tableBody = document.getElementById('table-body');
        const pagination = document.getElementById('pagination');
        const numberOfRecords = 10;
        const data = [{ "name": "盖伦", "age": 57, "email": "921892942@qq.com" },
        { "name": "寒冰", "age": 34, "email": "109103238@qq.com" },
        { "name": "提莫", "age": 9, "email": "502070719@qq.com" },
        { "name": "李白", "age": 36, "email": "417749959@qq.com" },
        { "name": "蔡徐坤", "age": 16, "email": "973596953@qq.com" },
        { "name": "杜甫", "age": 41, "email": "942965367@qq.com" },
        { "name": "美国队长", "age": 15, "email": "114716249@qq.com" },
        { "name": "梦泪", "age": 47, "email": "590179606@qq.com" },
        { "name": "波多野结衣", "age": 40, "email": "747608417@qq.com" },
        { "name": "故氏", "age": 78, "email": "585681048@qq.com" },
        { "name": "蓝烟", "age": 66, "email": "428328200@qq.com" },
        { "name": "柴狗", "age": 16, "email": "369066406@qq.com" },
        { "name": "麦泽伦", "age": 36, "email": "720413906@qq.com" },
        { "name": "赏金猎人", "age": 75, "email": "359892456@qq.com" },
        { "name": "卡西莫多", "age": 54, "email": "385608044@qq.com" },
        { "name": "小溅", "age": 19, "email": "674694667@qq.com" },
        { "name": "阿泽", "age": 4, "email": "538646396@qq.com" },
        { "name": "猫雷", "age": 50, "email": "765373044@qq.com" },
        { "name": "火云邪神", "age": 1, "email": "264221711@qq.com" },
        { "name": "汪兆伦", "age": 62, "email": "540420931@qq.com" },
        { "name": "忘了爱", "age": 26, "email": "989286342@qq.com" },
        { "name": "太库辣", "age": 51, "email": "700017319@qq.com" },
        { "name": "小乔", "age": 38, "email": "590427611@qq.com" },
        { "name": "周瑜", "age": 72, "email": "527987811@qq.com" },
        { "name": "黄盖", "age": 77, "email": "321638069@qq.com" },
        { "name": "常山赵子龙", "age": 44, "email": "66663480@qq.com" },
        { "name": "诸葛亮", "age": 59, "email": "310891730@qq.com" },
        { "name": "刘备", "age": 50, "email": "921692309@qq.com" },
        { "name": "曹操", "age": 78, "email": "10521024@qq.com" },
        { "name": "程序员", "age": 9, "email": "285079658@qq.com" },
        { "name": "靓女", "age": 19, "email": "314720070@qq.com" },
        { "name": "陈一发儿", "age": 55, "email": "538554394@qq.com" },
        { "name": "coco", "age": 28, "email": "974386847@qq.com" },
        { "name": "沐上", "age": 76, "email": "544043407@qq.com" },
        { "name": "雨化田", "age": 61, "email": "197201894@qq.com" },
        { "name": "赵怀真", "age": 6, "email": "355474791@qq.com" },
        { "name": "教父", "age": 12, "email": "709539660@qq.com" },
        { "name": "梅德拉诺", "age": 19, "email": "20727303@qq.com" },
        { "name": "科比", "age": 39, "email": "443141985@qq.com" },
        { "name": "鲨鱼辣椒", "age": 35, "email": "254280824@qq.com" },
        { "name": "周星驰", "age": 9, "email": "565379117@qq.com" },
        { "name": "欧阳斌斌", "age": 39, "email": "490570108@qq.com" },
        { "name": "斯人若彩虹", "age": 25, "email": "198889386@qq.com" },
        { "name": "遇上方知有", "age": 54, "email": "333360391@qq.com" },
        { "name": "阿银", "age": 73, "email": "447577796@qq.com" },
        { "name": "周杰伦", "age": 11, "email": "322225839@qq.com" },
        { "name": "可可", "age": 12, "email": "794667478@qq.com" },
        { "name": "于果", "age": 89, "email": "989897107@qq.com" },
        { "name": "纳木错", "age": 4, "email": "1756016@qq.com" },
        { "name": "执着", "age": 33, "email": "565141065@qq.com" },
        ]; // 填充具体数据（以上数据皆为杜撰）

        let currentPage = 1;

        function displayTable(records, page) {
            tableBody.innerHTML = "";
            page--;

            let start = numberOfRecords * page;
            let end = start + numberOfRecords;
            let paginatedRecords = records.slice(start, end);

            for (let i = 0; i < paginatedRecords.length; i++) {
                let record = paginatedRecords[i];
                let row = `
                    <tr>
                        <td>${record.name}</td>
                        <td>${record.age}</td>
                        <td>${record.email}</td>
                     </tr>
                `;
                tableBody.innerHTML += row;
            }
        }

        function setupPagination(records) {
            pagination.innerHTML = "";

            let pageCount = Math.ceil(records.length / numberOfRecords);

            for (let i = 1; i < pageCount + 1; i++) {
                let btn = document.createElement('button');
                btn.innerText = i;

                if (i == currentPage) {
                    btn.classList.add('active');
                }

                btn.addEventListener('click', function () {
                    currentPage = i;
                    displayTable(records, currentPage);

                    let currentButton = document.querySelector('.pagenumbers button.active');
                    currentButton.classList.remove('active');
                    btn.classList.add('active');
                });

                pagination.appendChild(btn);
            }
        }

        displayTable(data, currentPage);
        setupPagination(data);
    </script>
</body>

</html>