javascript题目C 创建动态表格
描述：实现表格懒加载，参考界面如下图，右侧始终显示滚动条。要求：1、初始显示1~10每行显示一个。（10分）2、当滚动条到达底部时，一次生成5行并填充到表格尾部，每行显示...
描述：
实现表格懒加载，参考界面如下图，右侧始终显示滚动条。
要求：
1、 初始显示1~10每行显示一个。 （10分）
2、 当滚动条到达底部时，一次生成5行并填充到表格尾部，每行显示行数。（10分）
3、 步骤2的过程要求滚动右侧滚动条后2秒执行。（10分）
4、 在这两秒中，利用JS代码产生一个图层覆盖住表格，防止对这个表格的滚动操作。 （10分）
5、 表格渲染完毕后，覆盖图层消失，表格可以继续滚动。（10分）
请求救援 展开
实现表格懒加载，参考界面如下图，右侧始终显示滚动条。
要求：
1、 初始显示1~10每行显示一个。 （10分）
2、 当滚动条到达底部时，一次生成5行并填充到表格尾部，每行显示行数。（10分）
3、 步骤2的过程要求滚动右侧滚动条后2秒执行。（10分）
4、 在这两秒中，利用JS代码产生一个图层覆盖住表格，防止对这个表格的滚动操作。 （10分）
5、 表格渲染完毕后，覆盖图层消失，表格可以继续滚动。（10分）
请求救援 展开
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>
Yugi
</title>
<style>
table {
margin: auto;
width: 100%;
height: 200px;
border: 1px solid black;
border-collapse: collapse;
}
table tr:hover{
background-color: red;
cursor: pointer;
}
table tr td {
border: 1px solid black;
}
div.wrap {
margin:auto;
width:60%;
height:106px;
overflow-y:scroll;
border: 1px solid #fd3;
}
</style>
<script>
onload = function ()
{
var div = document.getElementsByTagName("div")[0];
var yugi = new Yugi (10, 1);
yugi.createTable (div);
}
var Yugi = function (row, col)
{
this.row = row;
this.col = col;
}
Yugi.prototype = new Yugi;
Yugi.prototype.constructor = Yugi;
Yugi.prototype.createTable = function (dom)
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var me = this;
me.tbody = tbody;
me.addRow (me.row, me.col);
table.appendChild (tbody);
if (!!dom)
{
dom.appendChild(table);
dom.onscroll = function ()
{
if (dom.scrollTop >= table.offsetHeight - dom.clientHeight)
{
me.layering(dom.offsetWidth,dom.offsetHeight,dom.offsetTop,dom.offsetLeft);
me.timeout = setTimeout(function(){
me.addRow(5, 1);
me.layer.style.display = 'none';
clearTimeout(me.timeout);
} , 2000);
}
}
}
else
{
document.body.appendChild (table);
}
}
Yugi.prototype.addRow = function (row, col)
{
var tbody = this.tbody;
for (var i = 0; i < row; i++)
{
var len = tbody.rows.length;
var tr = tbody.insertRow (len);
for (var j = 0; j < col; j++)
{
var td = tr.insertCell (j);
td.innerHTML =
tr.previousSibling
?
parseFloat (tr.previousSibling.cells[0].innerHTML) + 1
:
1;
}
}
}
Yugi.prototype.layering = function(w,h,t,l)
{
var layer;
if (!!(layer = document.getElementById("layer"))) {
layer.style.display = "block";
}
else{
layer = document.createElement("div");
layer.id = "layer";
layer.style.width = w + "px";
layer.style.height = h + "px";
layer.style.top = t + "px";
layer.style.left = l + "px";
layer.style.position = "absolute";
layer.style.backgroundColor = "rgb(45,45,45)";
layer.style.zIndex = 5000;
layer.style.opacity = 0.2;
layer.innerHTML = "loading...";
layer.style["line-height"] = h + "px";
layer.style.textAlign = "center";
layer.style.color = "white";
document.body.appendChild(layer);
this.layer = layer;
}
}
</script>
</head>
<body>
<div class="wrap">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
