table问题续

yjsyjs 2002-09-27 08:14:03
由于table里的数据很多，屏幕显示不下，我要把table放在一个div里面加上滚动条，但我要实现表头固定，右滚动条移动，表头不动，下滚动条移动，表头要跟着动
,而且表格的宽度要能被鼠标自由滑动如何实现，不胜感谢各位高手的帮助
...全文
54 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
方工 2002-09-27
  • 打赏
  • 举报
 回复
如果用户用的是IE，可以考虑使用MSFlexGrid控件
<object classid="clsid:6262D3A0-531B-11CF-91F6-C2863C385E30" id="Grid1"
width="291" height="151">
<param name="Rows" value="10">
<param name="Cols" value="8">
<param name="AllowUserResizing" value="1">
<!-- 0 none 1 col 2 row 3 both-->
<param name="FixedRows" value="1">
<param name="FixedCols" value="0">
</object>
</p>
<script>
n=0;
try{
n=Grid1.Version;
}
catch(e){
alert("您没有安装MSFlexGrid控件，某些数据无法正常显示");
}
if(n>="600") initGrid();
//initGrid();
function initGrid(){
with (Grid1){
for(var i=0;i< Cols; i++){
Row = 0;
Col = i;
Text = "第" + i + "列";
for(var j=1; j< Rows; j++){
Col= i;
Row = j;
Text = Row + " . " + Col;
}
}
}
}
</script>

flashasp 2002-09-27
  • 打赏
  • 举报
 回复
<script>
var rowNum = 20;
var colNum = 9;
// Array that holds the columns width
var arrTDwidth = new Array (77, 31, 71, 113, 52, 53, 41, 64, 55, 90,
70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50,
30, 120, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80,
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90,
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80,
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90,
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80,
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90,
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80,
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90,
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80,
70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80, 70, 180, 12, 90,
70, 145, 200, 80, 70, 180, 12, 90, 70, 145, 23, 50, 30, 120, 200, 80,
70, 180, 12, 90, 70);
function drawTab (rows, cols, color, id)
{
sHTML = "<TABLE id='"+id+"' bgcolor='"+color+"' border=1 style='tableLayout:fixed'>";
count=0;
sHTML += "\n<THEAD id='downTblHead'>\n";
i=0;
for (var j=0; j < cols; j++)
{
width = arrTDwidth;
sHTML += "<TH id='a0"+j+"' nowrap style='word-wrap: break-word;'>这是: Row"+i+"Col"+j+"</TH>";
//sHTML += "<TH id='a0"+j+"' nowrap style='word-wrap: break-word;' style='width:"+arrTDwidth[count]+"pt;'>这是: Row"+i+"Col"+j+"</TH>";
count++;
}
count = 0;
sHTML += "\n</THEAD>\n";
sHTML += "\n<TBODY>\n";
for (var i=1; i<rows; i++)
{
sHTML += "\n<TR>\n";

for (var j=0; j<cols; j++)
{
width = arrTDwidth;
sHTML += "<TD id='a"+i+j+"' style='width:150;'>这是: Row"+i+"Col"+j+"</TD>";
//sHTML += "<TD id='a"+i+j+"' style='word-wrap: break-word;' nowrap style='word-wrap: break-word;' style='width:"+arrTDwidth[count]+"pt;'>这是: Row"+i+"Col"+j+"</TD>";
count++;
}
count = 0
sHTML += "\n</TR>\n";
}

sHTML += "\n</TBODY>\n";
sHTML += "\n</TABLE>";

return sHTML;

}

function cloneHeader ()
{
var x = document.all['downTblHead'].cloneNode(true);
for (var j = 0; j < colNum; j++)
{
document.all['a0'+j].id = 'head'+j;
}
document.all['downTblHead'].id = "downTblHead4hidden";
document.all['upTbl'].appendChild(x);
document.all['upTbl'].width = document.all['downTblHead4hidden'].offsetWidth;
synchronizeHeader ()
}

function synchronizeHeader ()
{
var ok = true;
var max = 0;
while (ok && max < 20)
{
max++;
ok = false;
for (var j = 0; j < colNum; j++)
{
if (document.all['a0'+j].offsetWidth != document.all['head'+j].offsetWidth)
{
ok = true;
document.all['a0'+j].style.width = document.all['head'+j].offsetWidth;
}
}
}

}

function getScrollBraWidth ()
{
try
{
var elem = document.createElement("DIV");
elem.id = "asdf";
elem.style.width = 100;
elem.style.height = 100;
elem.style.overflow = "scroll";
elem.style.position = "absolute";
elem.style.visibility = "hidden";
elem.style.top = "0";
elem.style.left = "0";
document.body.appendChild (elem);
scrollWidth = document.all['asdf'].offsetWidth - document.all['asdf'].clientWidth;
document.body.removeChild (elem);
delete elem;
}
catch (ex)
{
return false;
}

return scrollWidth;
}

function findPosX (obj)
{
var curleft = 0;
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
return curleft;
}

</script>

<body bgcolor="#000000", text="#ffffff" onLoad="cloneHeader ();">

<div id="headerContainer" style="position: absolute; z-index:2;">
<TABLE id='upTbl' bgcolor='gray' border=1 style="tableLayout:fixed">
</TABLE>
</div>

<div id="dataContainer" style="height:300;overflow:scroll; z-index:1; position: absolute;" >
<script language="JavaScript">
<!--
document.write(drawTab(rowNum, colNum, "", "data"));
document.all['dataContainer'].style.width = document.all['data'].offsetWidth + getScrollBraWidth ();
document.all['headerContainer'].style.width = document.all['data'].offsetWidth;
//-->
</script>
</div>

</body>
</html>
熟悉而又陌生的table(续）
针对table table:fixed之后，指定col宽度，对td做 { white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; } 如果是在table上做，结构不会乱，但是超出宽度的不会被截断 如果没有fixed...
ALLHiC续: 如何构建Allele.ctg.table
ALLHiC续: 如何构建Allele.ctg.table Allele.ctg.table是ALLHiC用于过滤多倍体基因组中因等位序列相似引起的HiC噪音的必要输入。 构建的方法有很多种，这里列举两个方法。 方法一: 基于BLAST 基于BLAST的方法需要你...
bootstrap-table固定表头，同时适配高度，兼容ie，checkbox，固定列解决方案(续)
bootstrap-table固定表头，同时适配高度，兼容ie，checkbox，固定列解决方案(续)前文链接：bootstrap-table固定表头，同时适配高度，固定列解决方案上篇本人对 懒得安分 的技术进行改造，得到的一个初始版js插件，此...
el-element——el-table嵌入el-input el-table表格内容编辑 el-table编辑 el-table嵌套input 实现表单
el-element——el-table嵌入el-input el-table表格内容编辑
TABLE的logging属性(续)
前天在 “TABLE的logging属性” 文章中留下了一个问题：table的logging属性到底从哪里可以提现出来？？？ 今天在网上找到这么一句话：NOLOGING选项只是在direct-load模式下才不写redo log,nomal DML无效 上篇文章...
JavaScript

87,996

社区成员

224,693

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章