关于原生js的表格滚动

原创已于 2024-04-14 14:41:19 修改 · 481 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-04-14 14:16:31 首次发布

博客介绍了前端开发中表格交互效果的实现。在HTML部分，固定thead，让tbody滚动并隐藏溢出；CSS部分设定表格盒子大小；JS部分通过DOM操作处理鼠标事件、数据渲染及背景颜色设置等。

1、html部分：

对thead进行固定

tbody使用盒子scroll进行滚动，外面一层盒子启用溢出隐藏

<!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">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>InsCode</title>
</head>
<body>
  <div class="right-bottom">
                    <div class="right-bottom-left" id="right-bottom"></div>
                    <div class="right-bottom-right">
                        <table>
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>城市</th>
                                    <th>最高温度</th>
                                    <th>最低气温</th>
                                </tr>
                            </thead>
                        </table>

                        <div style="overflow:hidden;"><!-- //隐藏溢出 -->
                            <div class="scroll"><!-- //控制滚动 -->

                                <table>
                                    <tbody>

                                    </tbody>
                                </table>

                            </div>
                        </div>

                    </div>
    <script src="script.js"></script>
</body>
</html>

2、css部分

对盒子表格进行大小宽高的设定

.right-bottom{
    width: 100vw;
    height: 100vh;
}

.right-bottom-right {
    width:100%;
    overflow: hidden;
    /* 隐藏溢出内容 */
    border-radius: 1vh;

}

thead {

    background-color: #22c77a;
}

.right-bottom-right .scroll {
    width: 100%;
    overflow: hidden;
}


.right-bottom-right table {
    width: 100%;
    border-collapse: collapse;
}

.right-bottom-right table thead tr th {
    width: 25%;
    border: solid 0.25vw #256fa8;
    text-align: center;
}

.right-bottom-right table tbody tr td {
    width: 25%;
    border: solid 0.25vw #256fa8;
    text-align: center;
}

3、js部分

使用dom操作对鼠标经过离开等操作进行操作，数据遍历渲染，背景颜色等等设置

 
 
    const tbody = document.querySelector('.right-bottom-right tbody');
 
 
//数据
jsd={
城市:  ['中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市', '中卫市', '吴忠市', '固原市', '石嘴山市', '银川市'],
年份: [2011, 2011, 2011, 2011, 2011, 2012, 2012, 2012, 2012, 2012, 2013, 2013, 2013, 2013, 2013, 2014, 2014, 2014, 2014, 2014, 2015, 2015, 2015, 2015, 2015, 2016, 2016, 2016, 2016, 2016, 2017, 2017, 2017, 2017, 2017, 2018, 2018, 2018, 2018, 2018, 2019, 2019, 2019, 2019, 2019, 2020, 2020, 2020, 2020, 2020, 2021, 2021, 2021, 2021, 2021, 2022, 2022, 2022, 2022, 2022, 2023, 2023, 2023, 2023, 2023],
最低温:  [-20, -19, -21, -22, -19, -23, -18, -22, -23, -19, -17, -18, -17, -24, -19, -18, -15, -26, -20, -16, -15, -13, -16, -18, -14, -24, -20, -24, -26, -22, -17, -14, -14, -21, -18, -17, -16, -16, -23, -18, -15, -13, -13, -20, -16, -21, -19, -19, -26, -19, -21, -20, -20, -25, -21, -17, -16, -17, -21, -16, -21, -20, -19, -22, -19],
最高温: [36, 37, 31, 37, 37, 35, 36, 30, 35, 35, 36, 36, 31, 36, 36, 37, 38, 32, 38, 38, 36, 38, 32, 38, 37, 36, 37, 31, 37, 37, 38, 40, 32, 40, 39, 35, 36, 29, 37, 36, 36, 36, 31, 36, 36, 35, 37, 29, 37, 37, 37, 39, 33, 39, 38, 38, 38, 31, 38, 37, 36, 35, 31, 37, 36]
}

 for (let n = 0; n < jsd['城市'].length; n++) {
                const tr = document.createElement('tr')
                if (n % 2 === 0) {
                    tr.style.backgroundColor = '#1974b5'
                } else {
                    tr.style.backgroundColor = '#24dcba'
                }
                //获取数据渲染
                tr.innerHTML =
                    `<td>${jsd['年份'][n]}</td>
                     <td>${jsd['城市'][n]}</td>
                     <td>${jsd['最高温'][n]}</td>
                     <td>${jsd['最低温'][n]}</td>`;
                //追加节点到父元素的子节点的最后一位
                tbody.appendChild(tr)
            }

            let scrollBox = document.querySelector('.right-bottom-right .scroll');

            let distance = 0;
            //设置全局变量控制定时器
            let p
            //滚动函数
            function time() {
                p = setInterval(function () {
                    distance += 1;
                    scrollBox.style.transform = 'translateY(-' + distance + 'px)';
                    //当滚动到最底部时跳会最初位置滚动，实现无限滚动
                    if (scrollBox.style.transform == 'translateY(-1500px)') {//translateY(-1500px)设置看数据长度如何
                        distance = 0
                    }
                }, 90);
            }
            //打开大屏执行滚动
            folg = true
            if (folg) {
                {
                    time()
                    folg = !folg
                }
            }

            scrollBox.addEventListener('mouseout', function () {
                //调用滚动函数
                time()

            }



            )
            scrollBox.addEventListener('mouseover', function () {
                //鼠标悬停暂停
                clearInterval(p)
            })