我使用以下代码片段在 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/