WEB页面使用div+table 夏飘雪(2009-8-17 8:06:54) 点击:
12254 回复:
0 IP:
121.24.246.* 最近需要在jsp页面动态显示后台模块收到的监控信息,数据量不是很大,但是需要动态生成,页面整体不能出现滚动条,于是需要内嵌滚动条显示内容,在google搜索了下,决定使用div+table,div负责滚动条显示,table动态生成tr显示内容,div设置:
<div style="OVERFLOW-Y:auto;width:100%;height:500px;position: absolute;left:25px" id="show_div_id">
<table width="100%" border="1" align="center" style="table- layout:fixed;word-wrap:break-word;word-break;break-all" cellpadding="2" cellspacing="0" borderColorLight="#ffffff" borderColorDark="#e5f0f2" bgcolor="#e5f0f2" id="show_tab">
</table>
</div>
div设置高度和左边距,使用绝对定位,防止table中tr行太多导致div移位,页面变得很难看,div超过指定的高度会在上下方向(y)出现滚动条。
使用ajax定时从后台获取内容,然后使用js根据获取到的内容动态生成tr添加到table中即可。示例如下:
show_demo=function(){
var body = document.getElementById('show_tab');
//data是ajax从后台拿到的数据
for(var property in data) {
var newRow = body.insertRow(j);
newRow.align="center";
newRow.id="newPropRow"+j;
document.getElementById("newPropRow"+j).setAttribute("className","wordhei");
var p = newRow.insertCell(0);
p.width="25%";
p.innerHTML=property;
var v = newRow.insertCell(1);
v.width="75%";
v.style.wordBreak="break-all";//超过td宽度自动换行
v.innerHTML=" "+data[property];
}
}
定时执行show_demo()方法即可。
var sh=window.setInterval("show_demo()",1000); //一秒执行一次
关闭定时器:
window.clearInterval(sh);