js table 垂直滚动

最新推荐文章于 2024-05-16 16:52:30 发布
最新推荐文章于 2024-05-16 16:52:30 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ann_mi/article/details/81327185
版权

分了无缝对接和非无缝对接
1、刚开始做的时候，没有考虑无缝对接这个问题，效果就是不怎么好看，但是可以用，如果数据量多的时候是看不出区别，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="../../../../../../libs/jquery1.8.2/jquery-1.8.2.min.js"></script>
<style>
    .w_newslist_box_newslistXXGX6 {
        width: 100%;
        float: left;
        border: 1px solid #d2d2d2;
    }

    .w_newslist_head_newslistXXGX6 {
        height: 34px;
        width: 100%;
        background: url(http://www.xnyqt.petrochina/sites/cqkglc/EX_STATICPAGES_/images/head.jpg) left top repeat-x;
        border-bottom: 1px solid #d2d2d2;
    }

    .w_newslist_head_newslistXXGX6 h3 {
        float: left;
        height: 32px;
        width: 96px;
        text-indent: 35px;
        background: url(http://www.xnyqt.petrochina/sites/cqkglc/EX_STATICPAGES_/images/title6.png) 5px center no-repeat;
        border-bottom: 2px solid #d80000;
        line-height: 32px;
        color: #db0202;
        font-weight: bold;
    }

    .fxzy {
        height: 126px;
        width: 100%;
        border: 1px solid #fae5c3;
        /*background: url(../images/ayfc_03.png) repeat-x;*/
        overflow: hidden;
    }

    .fr {
        float: right;
    }

    h3 {
        display: block;
        /*font-size: 1.17em;*/
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
    }

    .fxzy table {
        border: 1px solid #eee9d5;
        text-align: center;
        border-collapse: collapse;
    }

    tbody {
        display: table-row-group;
        vertical-align: middle;
        border-color: inherit;
    }

    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    .fxzy table th {
        height: 34px;
        font: 14px/34px '微软雅黑';
        color: #000000;
        text-align: center;
    }

    .fxzy table td {
        padding: 10px 0;
        color: #222;

    }

    h3 {
        font-size: 90%;
        margin: 0;
        padding: 0;
        font-family: Simsun, 宋体, verdana, arial, helvetica, sans-serif
    }

    .ms-WPBody {
        font-size: 9pt;
        font-family: Tahoma, "宋体";
    }

    .w_newslist_head_newslistXXGX6 a {
        display: inline-block;
        float: right;
        font-size: 12px;
        margin-right: 12px;
        margin-top: 13px;

    }
</style>
<body>
<div class="w_newslist_box_newslistXXGX6">
    <!--<div class="w_newslist_inner_newslistXXGX6">-->
       <!-- <div class="w_newslist_head_newslistXXGX6">
            <h3 style="width: 160px">今日主要风险作业</h3>
            <a href="/IMP/main.html?comp=App.view.riskOperationAndRiskPrompt.riskOperationAndRiskPrompturl" target="_blank">更多&gt;&gt;</a>
        </div>-->
        <!--<div class="w_newslist_body_newslistXXGX6">-->
            <div class="fxzy fr">
                <table hidden="true" width="100%" border="1" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                        <th width="41">序号</th>
                        <th width="72">作业分级</th>
                        <th width="90">单位</th>
                        <th width="74">作业地点</th>
                        <th width="130">作业名称</th>
                        <th style="word-wrap:break-word;">今日主要作业内容</th>
                        <th width="99">现场负责人</th>
                    </tr>
                    </tbody>
                </table>
                <div class="fxzy-wrap"
                     style="width: 100%;position: relative;height: 270px;overflow: hidden;display: block;">
                    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="demohq"
                           style="position: absolute; left: 0px; top: -26px;">

                        <tbody id="getRisk"></tbody>

                    </table>
                </div>
            </div>
        <!--</div>-->
        <!--<div class="w_newslist_foot_newslistXXGX6"></div>-->
    <!--</div>-->
</div>
</body>
<script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    var demohq = $('#demohq'), scrollY = 0
    function Marqueehq() {
        //  console.log(1)
        if (scrollY == 270) {
            scrollY = 0;
        } else {
            demohq.css('top', '-' + (scrollY++) + 'px');
        }
    }
    var MyMarhq = setInterval(Marqueehq, 60)
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    $(function () {
                $.getJSON('./json',
                        {
                            date: new Date().Format("yyyy-MM-dd")
//                            date: '2018-06-11'
                        },
                        function (json) {

                            $.each(json.result.content, function (index, value) {
                                $('#getRisk').append(
                                        '<tr><td width="41"style="word-wrap:break-word;word-break:break-all;">' + (index + 1) + '</td>' +
                                        '<td width="72"style="word-wrap:break-word;word-break:break-all;">' + value.RISK_TYPE + '</td>' +
                                        '<td width="90"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_UNIT + '</td>' +
                                        '<td width="74"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_PLACE + '</td>' +
                                        '<td width="130" style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_NAME + '</td>' +
                                        '<td style="word-wrap:break-word;">' +
                                        value.CONTENT_RISK_TODAY + '</td>' +
                                        '<td  width="99"  style="word-wrap:break-word;word-break:break-all;">' + value.ON_SITE_NAME + '</td></tr>'
                                )
                            })
                        })
            }
    )


</script>
</html>

2.无缝对接的效果，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="../../../../../../libs/jquery1.8.2/jquery-1.8.2.min.js"></script>
<style type="text/css">
    .tablebox table td {
        padding: 10px 0;
        color: #222;

    }

    .tablebox table th {
        height: 34px;
        font: 14px/34px '微软雅黑';
        color: #000000;
        text-align: center;
    }

    .tablebox table {
        border: 1px solid #eee9d5;
        text-align: center;
        border-collapse: collapse;
    }

    .tablebox {
        height: 126px;
        width: 100%;
        border: 1px solid #fae5c3;
        /*background: url(../images/ayfc_03.png) repeat-x;*/
        overflow: hidden;
    }

    h3 {
        font-size: 90%;
        margin: 0;
        padding: 0;
        font-family: Simsun, 宋体, verdana, arial, helvetica, sans-serif
    }

    .fr {
        float: right;
    }

    h3 {
        display: block;
        /*font-size: 1.17em;*/
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
    }

    .tbl-body {
        width: 100%;
        position: relative;
        top: 0;
        display: block;
        height: 270px;
        overflow: hidden;
        left: 0;
    }

    h3 {
        display: block;
        /*font-size: 1.17em;*/
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
    }

    tbody {
        display: table-row-group;
        vertical-align: middle;
        border-color: inherit;
    }

    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    h3 {
        font-size: 90%;
        margin: 0;
        padding: 0;
        font-family: Simsun, 宋体, verdana, arial, helvetica, sans-serif
    }

    .tablebox table {
        width: 100%;
    }

    .fr {
        float: right;
    }
</style>
</head>
<body bgcolor="#FFFFFF">
<div class="tablebox fr">

    <div class="tbl-header">
        <table hidden="true" border="1" width="100%" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th width="41">序号</th>
                <th width="72">作业分级</th>
                <th width="90">单位</th>
                <th width="74">作业地点</th>
                <th width="130">作业名称</th>
                <th style="word-wrap:break-word;">今日主要作业内容</th>
                <th width="99">现场负责人</th>
            </tr>
            </thead>
            <tbody style="opacity:0;"></tbody>
        </table>
    </div>

    <div class="tbl-body">
        <table width="100%" border="1" cellspacing="0" cellpadding="0" id="demohq"
               style="position: absolute; left: 0px; ">
            <thead hidden="true">
            <tr>
                <th width="41">序号</th>
                <th width="72">作业分级</th>
                <th width="90">单位</th>
                <th width="74">作业地点</th>
                <th width="130">作业名称</th>
                <th style="word-wrap:break-word;">今日主要作业内容</th>
                <th width="99">现场负责人</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    var MyMarhq = '';
    $('.tbl-body tbody').empty();
    $('.tbl-header tbody').empty();
    var str = '';
    $(function () {
                $.getJSON('./json/barchart.json',
                        {
//                            date: new Date().Format("yyyy-MM-dd")
//                            date: '2018-06-11'
                        },
                        function (json) {
                            var Items = json.result.content;
                            $.each(json.result.content, function (index, value) {

                                str = '<tr><td width="41"style="word-wrap:break-word;word-break:break-all;">' + (index + 1) + '</td>' +
                                        '<td width="72"style="word-wrap:break-word;word-break:break-all;">' + value.RISK_TYPE + '</td>' +
                                        '<td width="90"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_UNIT + '</td>' +
                                        '<td width="74"style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_PLACE + '</td>' +
                                        '<td width="130" style="word-wrap:break-word;word-break:break-all;">' + value.EVENT_NAME + '</td>' +
                                        '<td style="word-wrap:break-word;">' +
                                        value.CONTENT_RISK_TODAY + '</td>' +
                                        '<td  width="99"  style="word-wrap:break-word;word-break:break-all;">' + value.ON_SITE_NAME + '</td></tr>'

                                $('.tbl-body tbody').append(str);
                                $('.tbl-header tbody').append(str);
                            })
                            if (Items.length > 1) {
                                $('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
                                $('.tbl-body').css('top', '0');
                                var tblTop = 0;
                                var speedhq = 50; // 数值越大越慢
                                var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

                                function Marqueehq() {
                                    if (tblTop <= -outerHeight * Items.length) {
                                        tblTop = 0;
                                    } else {
                                        tblTop -= 1;
                                    }
                                    $('.tbl-body').css('top', tblTop + 'px');
                                }

                                MyMarhq = setInterval(Marqueehq, speedhq);


                            }


                        })
            }
    )


</script>
</body>
</html>
耳翼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
在Table表格中添加垂直滚动条
RisoKome的博客
07-15 1111
<style> /*设置 tbody高度大于400px时 出现滚动条*/ table tbody { display: block; height: 400px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; table-layout: fixed; } /*滚动条默
用滚轮控制滚动条水平移动、垂直移动（table/tree）
DarkSying的博客
03-28 312
一般控件，滚轮默认滚动垂直滚动条，比如表格、树。我们可以通过重写滚轮事件来控制滚动方向（水平：shift+wheel 垂直：wheel）。若需要屏蔽掉滚动，直接event->ignore().二、自带滚动条控件（table/tree）一、自定义的滚动条QScrollBar。需要滚轮事件+键盘事件组合。
原生js操作table表格增删改查操作汇总
最新发布
随手记的笔记
05-16 818
【代码】原生js操作table表格增删改查操作汇总。
渡一教育公开课web前端开发JavaScript精英课学习笔记（三十）jQuery实现Tab垂直滑动
じоνё靁〃N维空间
04-02 562
jQuery实现Tab垂直滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
实现表格数据纵向轮播滚动样式（包括nav-tabs选项卡放三表方法）
hexianfan的博客
06-05 654
本文用到的是三张表同时滚动，并且只在数据大于4条时才进行滚动，数据太少容易有衔接空隙，当鼠标放到表格上时，数据停止滚动，移除鼠标继续滚动。 CSS部分 .gslscrollcss { background-color: #FFFFFF; border: solid 1px white; width: auto; height: 198px; } /*控制表格宽度*/ .tablebox { /*控制滚动区域高度*/ height: 198px; ov
实现table的无限滚动
qq_38687592的博客
12-07 790
table无线滚动
DataTables的垂直滚动条.zip
07-31
本教程将重点讲解如何在 DataTables 中实现垂直滚动条，以解决当表格内容过多，无法在有限的屏幕空间内完全显示时的问题。 首先，我们需要确保已经正确地引入了 DataTables 的相关库文件。这包括 jQuery 库、...
用css给tbody加垂直滚动条的具体思路及样式代码
09-22
给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可，下面有个不错的示例，大家可以参考下
固定Table行列滚动.zip
05-24
例如，我们可以为表头单元格应用这些样式，使其在垂直滚动时始终保持在顶部。 对于固定列（Fixed Column），方法类似，但实现起来更复杂。通常需要创建两个表格，一个用于左侧的固定列，另一个用于右侧可滚动的列。...
jQuery.table_scroll插件将垂直和水平滚动条添加到HTML表格元素。-JavaScript开发
05-26
具有垂直滚动功能。 水平滚动可能会窥视表格滚动在这里尝试-http://volodymyr-bobko.github.io/table-scroll/ jQuery.table_scroll插件将垂直和水平滚动条添加到HTML表格元素。 具有垂直滚动功能。 水平滚动可能指定...
Table固定指定列进行横向滚动(可拓展)
05-29
4. **可拓展性**：描述中提到`Index.js` 可以进行拓展，这意味着可以将同样的逻辑应用到垂直滚动上，例如固定表头或者指定的行。这可能涉及到对表格行的操作，以及处理垂直方向的滚动事件。 这个解决方案不仅提高了...
html table表格设置滚动条
西凉的悲伤博客
08-24 2万+
table对tbody进行设置使其能够进行滚动。 效果如下： 代码如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格滚动</title> <style> table,tbody { disp
table表格自动滚动
辞忧*的博客
03-11 6190
大屏展示表格数据，需要进行实时滚动的效果 当前没使用json数据渲染，如果渲染要把内容放在 id=“fTbody” 的表格中 <table> <tbody> <tr class="f16"> <th width="10%">时间</th> <th width="10%">品类</th> <th widt.
HTML页面table滚动条的实现
热门推荐
好久不见的流星
05-08 2万+
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
table列表滚动
qq_38187583的博客
03-13 2375
css &lt;style&gt; * { margin: 0; padding: 0;} .myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: auto;} table tr.even{ ...
Table表格、列表 滚动加载实现
weixin_42333548的博客
05-09 3492
方案一：给table起一个className，监听当前table下的.ant-table-body元素的滚动(推荐) 主要实现逻辑： 1、在table外包一个div，添加滚动事件onScrollCapture 2、给table起一个类名，目的是为了获取table下ant-table-body的元素：let element = document.querySelectorAll(`.tableRect .ant-table-body`)[0] 3、判断依据 element.scr
table表格显示滚动条
weixin_60645637的博客
11-17 2924
在table父级元素中设置 overflow-y: auto;保持table父级元素和table大小相同；
vue实现table自动滚动
芳草萋萋鹦鹉洲哦
06-12 4613
客户需求：右下角表格实现自动滚动本案例中没有使用任何第三方插件，全部使用vue中相关的js、css以及定时器方式实现。解决问题的第一步不是找代码，而是分析问题。列表自动滚动常见方式有两种（上下左右的滚动不赘述，只是方向的问题，本案例以向上自动滚动为例）：（1）匀速滚动 （2）有间隔的平滑滚动。本案例先给出匀速滚动的方案。要匀速向上滚动，以我的经验，最容易想到的是用定时器实现，每隔一个时间差，列表向上移动一个像素（大于一个像素，可能会在视觉上给人卡顿掉帧的感觉），在时间够短的前提下，就会给人一种匀速向上的
table表格自动循环滚动
LIUupup_的博客
11-27 1034
实现效果：自动循环滚动局部引入或全局引入后，用组件包住要滚动的表格，并将表格数据传进去。参数：detailData是表格数据数组，classOptionThree是滚动的参数，这个实现效果是表头也会跟着滚动，要想表头不滚动很简单，利用两个表格组件，1. 需要滚动的表格去掉表头，用组件包着，2. 将另一个表格放在组件外边，只显示表格标题。这个组件有个缺陷：数据更新的时候，dom却不会更新。为了解决这个问题，可以利用v-if的强制刷新。在数据有更新时先将设为false,过100毫秒再设为true。
vxe-table 滚动条
03-13
1. 垂直滚动条：当表格内容超出容器高度时，会自动显示垂直滚动条，用户可以通过滚动条来上下滚动表格内容。 2. 水平滚动条：当表格内容超出容器宽度时，会自动显示水平滚动条，用户可以通过滚动条来左右滚动表格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值