动态获取表格（固定表头）实现代码-html教程-PHP中文网

首页

web前端

html教程

动态获取表格（固定表头）实现代码

高洛峰

Mar 15, 2017 am 09:18 AM

这篇文章介绍动态获取表格（固定表头）实现代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            overflow: auto;
            position: relative;
        }

        .tab2 {
            opacity: 0;
            position: absolute;
            top: 0;
        }
        .tab1 td{
            text-align: center;
        }
    </style>
</head>
<body>
<p>

    <table border="1px" cellspacing="0px" class="tab1">
        <thead class="th xh">

        </thead>
        <tbody class="td">

        </tbody>
    </table>
    <table border="1px" cellspacing="0px" class="tab2">
        <thead style="background: #fff" class="th">
        <tr>
        </tr>
        </thead>
    </table>
</p>
</body>
<script src="jquery.js"></script>
<script>
    $('p').scroll(function (x) {
        var $this = $(this),
                viewH = $(this).height(),//可见高度
                contentH = $(this).get(0).scrollHeight,//内容高度
                scrollTop = $(this).scrollTop();//滚动高度
        if (scrollTop > 0) {
            $('.tab2').css({
                "opacity": '1',
                "Z-index": '100',
                "top": scrollTop
            })

        } else if (scrollTop < 30) {
            $('.tab2').css({
                "opacity": '0'
            })
        }
    });

    Data();

    function Data() {
        var data = {

        };
        $.get(url, data, function (res) {

            $('.th').html(res.ReportHeard)
            if($('.tab1 tr th').length < 10){
                $('.tab1').css('width','100%');
                $('.tab2').css('width','100%');
            }else{
                var wd = $('.tab1 tr th').length * 120 + 'px'; // 通过后台返回的表头有多少列，如果少于10列表格100% 大于10则手动添加
                $('.tab1').css('width',wd)
                $('.tab2').css('width',wd)
            }
            var sjObj = JSON.parse(res.ContentList);
            var test = '';
            for (var key in sjObj) {
                test += '<tr>'
                $('.xh th').each(function () {
                    test += '<td>' + sjObj[key][$(this).attr('data')] + '</td>';
                })
                test += '</tr>'
            }
            $('.td').html(test);

　　　　　　　// 循环tabl里的th 看看有多少个  把每个th的宽度赋值给tab2里的th
            $('.tab1 thead th').each(function (i) {
                console.log($('.tab1 thead th').eq(i).width());
                $('.tab2 thead th').eq(i).width($('.tab1 thead th').eq(i).width())

            })

        })
    }

</script>
</html>

登录后复制

以上是动态获取表格（固定表头）实现代码的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7672

CakePHP 教程

1393

C# 教程

1206

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。