Rufen Sie den Implementierungscode für die Tabelle (fester Header) dynamisch ab-HTML-Tutorial-php.cn

Rufen Sie den Implementierungscode für die Tabelle (fester Header) dynamisch ab

高洛峰

Freigeben： 2017-03-15 09:18:29

Original

1453 Leute haben es durchsucht

In diesem Artikel wird der Implementierungscode zum dynamischen Abrufen der Tabelle (fester Header)

<!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>

Nach dem Login kopieren

vorgestellt

Das obige ist der detaillierte Inhalt vonRufen Sie den Implementierungscode für die Tabelle (fester Header) dynamisch ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!