个人中心
gpt4 book ai didi

javascript - 在 div 中定位表格

转载 作者：行者123 更新时间：2023-11-28 01:49:22 24 4
gpt4 key购买 nike

我使用以下代码片段在 html 表格中显示数据，以提高大数据的加载时间。

代码片段:

 <body onload="load();">
        <div id="Grid" style="overflow:scroll; width:600px;height:300px;   onscroll="handleScroll();"></div>
        <script type="text/javascript">        



  var orderArray = [100];
    var viewportH = 300;
    var prevScrollTop = 0;
    var scrollTop = 0;
    var vScrollDir = 1;
    var rows = [];
    var top=0;
    var temp=0;
    var m = 0;
    var prevRenderedRange = {}, prevVisibleRange = {};
    var renderedrange, visiblerange;
        var rows = [];  
        var extend;
        var tbody = document.createElement('tbody');
        for (var i = 0; i < 100; i++) {
            orderArray[i] = { "CustomerID": i, "CustomerName": "Name" + i, "City": "City" + i }
        }
        function load() {
            var panel = document.createElement('div');
            var h = orderArray.length * 20;
            panel.style.height = h + "px";
            var table = document.createElement('table');
            table.cellSpacing = 0;
            //table.style.position = "absolute";
            table.className = "table1";
            table.appendChild(tbody);
            panel.appendChild(table);
            var element = document.getElementById("Grid");
            element.appendChild(panel);
            this.render();
        }

        function handleScroll() {
            var contentdiv = $("#Grid");
            scrollTop = contentdiv.scrollTop();          

            var vScrollDist = Math.abs(scrollTop - prevScrollTop);
            if (vScrollDist) {
                vScrollDir = prevScrollTop < scrollTop ? 1 : -1;
                this.render();
                prevScrollTop = scrollTop;
            }
        }

        function render() {            
                renderedrange = this._getRenderedRowRange();          

            var datarange = orderArray.slice(renderedrange.top, renderedrange.bottom);
                var margin = ((renderedrange.top - visiblerange.top)*20) +
                    (renderedrange.top * 20) +
                     -temp +
                    "px";
            console.log("VisibleRange: " + visiblerange.top + " " + visiblerange.bottom);
            console.log("RenderedRowRange: " + renderedrange.top + " " + renderedrange.bottom);
            console.log(margin);
            $(".table1").css({ "top": margin });
            this._render(renderedrange);                        
        }

        function _render(range) {

            if (!range)
                return;

            console.log("Top:  " + range.top + "Bottom: " + range.bottom);
            for (var i = range.top; i <= range.bottom; i++) {

                if (i > orderArray.length - 1) {
                    return;
                }
                if (rows[i] != null)
                    continue;

                var vals = orderArray[i];
                var tr = document.createElement('tr');
                tr.className = "rowcell";
                tr.style.height = "20px";
                tr.height = "20px"
                var cell1 = document.createElement("td");
                cell1.style.border = "0px solid black";
                cell1.textContent = vals["CustomerID"];
                cell1.style.height = "20px";
                tr.appendChild(cell1);

                var cell2 = document.createElement("td");
                cell2.style.border = "0px solid black";
                cell2.textContent = vals["CustomerName"];
                cell2.style.height = "20px";
                tr.appendChild(cell2);
                tbody.appendChild(tr);
                rows[i] = i;
            }




        }       

        function _getRenderedRowRange() {
            visiblerange = this._getVisibleRowRange();
            var range = {};
            var topIndex = visiblerange.top;
            var bottomIndex = visiblerange.bottom;
            extend = Math.round(300 / 20);
            var minExtend = 3;
            if (vScrollDir == 1) {
                topIndex -= minExtend;
                bottomIndex += extend;
            } else {
                topIndex -= (extend - minExtend);
                bottomIndex += minExtend;
            }
            topIndex = Math.max(0, topIndex);
            bottomIndex = Math.min(orderArray.length, bottomIndex);
            range = { top: topIndex, bottom: bottomIndex };            
            return range;
        }

        function _getVisibleRowRange() {
            var coeff = scrollTop / (20 * orderArray.length);
            top = (coeff * orderArray.length);
            temp = (top % 1) * 20;
            var topIndex = Math.floor(top);
            var bottomIndex = Math.ceil(this._getrowposition(scrollTop + 300));
            topIndex = Math.max(0, topIndex);
            bottomIndex = Math.min(orderArray.length, bottomIndex);
            var rang = { top: topIndex, bottom: bottomIndex };
            return rang;
        }

        function   _getrowposition  (y) {
            return Math.floor((y) / 20);
        }   


    </script>
</body>

在这种情况下，我更新了表格的上边距以将表格放置在 div 中。但它没有正确应用。

注意:这是表虚拟化的简单示例，在我的例子中，我已将 div 中的表替换为

最佳答案

你的问题根本就不清楚。无论如何，如果你想将表格定位在div内，请将表格位置值设置为相对于父div；

style="position:relative;"

这样你的 table 就会有一个相对位置

关于javascript - 在 div 中定位表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19904937/

24 4 0
文章推荐： javascript - 在 Codecademy 石头剪刀布练习中嵌套 if/else 语句
文章推荐： javascript - 如何从网络摄像头捕获视频并将其上传到服务器？
文章推荐： javascript - 在鼠标单击时添加标记并删除 openlayers 中现有的标记？
文章推荐： html - 防止背景在 .dropdown-toggle 组件上改变颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com