切换为不分页显示
【首页】 【建站杂谈】 主题:WEB页面使用div+table
字体:    回复
WEB页面使用div+table 
夏飘雪(2009-8-17 8:06:54)  点击:11807  回复: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);

[返回]
[本主题共0回复 | 每页显示20回复]
 返回列表 跳至页首跳至页尾 放大字体 缩小字体
按用户名:    按标题:   按内容:       包括所有回复
【首页】→ 【建站杂谈】 回复:WEB页面使用div+table
帖子标题:
   未登录!    

您的权限:
发表回复:×
UBB功能:×
文件上传:×
 
风格选择:极速  古韵  宽屏  大字  |  图示说明: 24小时新发主题  最近被编辑的主题  超过24小时普通主题
页面执行时间:125毫秒 | 在线:3 今日:188 合计:3234850 | 清除COOKIE |