我一个TABLE,如何把表的前两行跟固定住? 用FRAME吧上下分割,上面放表头,下面放数据 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 呵呵,我正弄了一段时间这东东,如果你只是要考虑上下拉动时表头不动,那很简单,直接用个FRAME把表名放在上面部分就行了.如果你还要考虑左右也拉动,且左右拉动的时候表头部分也要左右动就麻烦的很了,我就搞那东东搞得要命,幸亏有个高手帮了我.还好你的似乎没那么麻烦. 用层可以.将表头部分做成一个层,在层里建一个表格.将表的主体部分做一个层.在JS里面将你的那个大表格的表头部分的内容考进那个表里去.用innerHTML,然后拉动的时候那个有表头部分的层不动,主体的层动就行了.不过我还是觉得你用IFRAME在这里可能会更实现些,没必要用层做那么麻烦. 呵呵,我也觉得.用IFRAME吧,比FRAME又会稍稍好些吧 看看我这个方法行不行?<body><table border="1" width="100%"> <tr> <td width="20%">标题一</td> <td width="20%">标题二</td> <td width="20%">标题三</td> <td width="20%">标题四</td> <td width="20%">标题五</td> </tr> <tr> <td colspan="5"> <div style="height:500;background-Color:snow;overflow:auto" id=user> <table width="100%" border=1> <% for i=0 to 50 %> <tr><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td></tr><%next%></table> </div> </td> </tr></table></body> 啊不行不能分FRAME因为要打印要连在一块怎么办? 要打印,给你看看这个用层做的吧,这个的功能很强的,左右拉保证第一列不动,上下拉,保证第一行不动,你自己消化消化一下,再把左右部分的去掉就行了.有问题再说.代码也是 JK 兄曾提供的.<html><head><style> tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')}; td{font-size:11}</style></head><script language=javascript>var The10TableWidth=0;//JKfunction changeColWidth()//JK:本函数功能主要是进行宽度对齐,本函数只执行一次{ if(document.all("the10Table")==null) return false; if(the11Table.rows[0].style.display=="none")return false; The10TableWidth=the10Table.offsetWidth; var theThe10TableColsNum=the10Table.rows[0].cells.length; for(var i=0;i<theThe10TableColsNum-1;i++)//将左半部分的宽度对齐 { the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth; if(the10Table.rows[1]) the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth; } var theThe11TableColsNum=the11Table.rows[0].cells.length; for(var i=0;i<theThe11TableColsNum;i++)//将右半部分的宽度对齐 { the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth; if(the11Table.rows[1]) the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth; } the00Div.innerHTML="<table width='100%' id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>" +the10Table.rows[0].outerHTML+"</table>"; the01Div.innerHTML="<table width='100%' id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>" +the11Table.rows[0].outerHTML+"</table>"; the11Table.style.width=the11Table.offsetWidth; the01Div.style.width=the11Div.style.width; the10Table.rows[0].style.display="none";//去掉表头行,也可以把本行去掉 the11Table.rows[0].style.display="none";//同上 changeDivHeight(); document.body.onresize=changeDivHeight; }function changeDivHeight()//JK:本函数主要用于根据当前窗口大小及表单所在位置来确定卷动条的宽与高,其中部分数字可以自动调整一下(比如其中的30,20两个数值,它与其它tag的margin设置有关{ if(document.all("the10Table")==null) return false; var theTopToBody=the10Div.offsetTop; var theOffsetElement=the10Div; while(theOffsetElement=theOffsetElement.offsetParent) theTopToBody+=theOffsetElement.offsetTop; var newHeight=document.body.clientHeight-theTopToBody-30; if(the10Table.offsetHeight<newHeight-30){ the10Div.style.height=null; the11Div.style.height=null; } else if(newHeight>10){ the10Div.style.height=newHeight; the11Div.style.height=newHeight; } var the11DivWidth=document.body.clientWidth-The10TableWidth-20; if(the11DivWidth>30) { the01Div.style.width=the11DivWidth; the11Div.style.width=the11DivWidth; } }</script><body onresize=changeDivHeight()><br/><font color=red>JK认为此效果华而不实,使用后会给其它的编码带来麻烦, 强烈建议慎用</font><br/><br/>用的时候需要注意的主要有:<br/>1.几个div的ID,以及table的ID,JK已将他们写死在程序里<br/>2.请定义行高(在本demo中,为“<font color=blue>height=22</font>”<br/>3.重点注意几个div的onscroll事件<br/>4.在实际使用中,将按钮的事件赋给body.onload即可<br/><input type=button value="Fix the head tr" onclick="changeColWidth()"> <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td valign=top width=1%><div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div ></div><div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop "><table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' ><tr height=22 ><td nowrap bgcolor="#66CCFF" >Thank you!</td><td nowrap bgcolor="#66CCFF" >You are welcome!</td></tr> <tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr></table><br/></div> </td> <td valign=top ><div id=the01Div style="overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft "></div><div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;"><table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' ><tr height=22><td nowrap bgcolor="#66CCFF" >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td><td nowrap bgcolor="#66CCFF" >I am fine! I am fine! I am fine! I am fine! </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr><tr height=22><td>a</td><td> </td></tr></table><br/></div> </td> </tr> </table></body></html> 改进后。<body style="text-align:center"><table width="778" border="1" cellpadding="0" cellspacing="0" style="overflow:scroll"> <tr align="center"> <td width="150">标题一</td> <td width="150">标题二</td> <td width="150">标题三</td> <td width="150">标题四</td> <td width="178">标题五</td> </tr> <tr> <td colspan="5"> <div style="height:500;background-Color:snow;overflow:auto" id=user> <table width="778" border=1 cellpadding="0" cellspacing="0"> <% for i=0 to 50 %> <tr><td width="150">1</td><td width="150">1</td><td width="150">1</td><td width="150">1</td><td width="160">1</td></tr><%next%></table> </div> </td> </tr></table></body> 可以打印<object id="factory" style="display:none" viewastext classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="ScriptX.cab#Version=5,60,0,360"></object><script>function myPrint(){document.all.item("print").style.visibility="hidden";window.print();document.all.item("print").style.visibility="visible";}</script>哈哈,感谢感谢 <div style="height:500;background-Color:snow;overflow:auto" id=user>刚打印了一页呵呵不错蓝月的太长了,我也找到解决办法了,呵呵呵以后遇到问题再来这个帖子看你的啦--不过非常感谢:)呵呵,你可以使用六段的这个.很不错,你可以把表格的宽度做小一点,这样就不会在有下拉条的时候对不齐了我不是做页面的-------晕菜,呵呵 如何操作外部样式??急!! 在线等,怎么在window.open中调js方法 重写window alert方法遇到的一个问题,请大师指教 IE不支持查找跨行文本? 关于弹出层 大牛们看看我这样能让JS和flash通信吗 javascript访问ActiveX属性 VML+JS的小应用,另有个小问题期望回答 请教两个简单的正则表达式,谢谢! background-image加载失败后 jQuery有办法获取这个错误吗? 关于页面刷新的问题 Javascript 参考手册 下不了了,哪位能帮帮忙?
如果你还要考虑左右也拉动,且左右拉动的时候表头部分也要左右动就麻烦的很了,我就搞那东东搞得要命,幸亏有个高手帮了我.还好你的似乎没那么麻烦.
不过我还是觉得你用IFRAME在这里可能会更实现些,没必要用层做那么麻烦.
<table border="1" width="100%">
<tr>
<td width="20%">标题一</td>
<td width="20%">标题二</td>
<td width="20%">标题三</td>
<td width="20%">标题四</td>
<td width="20%">标题五</td>
</tr>
<tr>
<td colspan="5">
<div style="height:500;background-Color:snow;overflow:auto" id=user>
<table width="100%" border=1>
<% for i=0 to 50 %>
<tr><td width="20%">1</td>
<td width="20%">1</td>
<td width="20%">1</td>
<td width="20%">1</td>
<td width="20%">1</td></tr>
<%next%>
</table>
</div>
</td>
</tr>
</table>
</body>
不行
不能分FRAME
因为要打印要连在一块
怎么办?
<head>
<style>
tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
td{font-size:11}
</style>
</head><script language=javascript>
var The10TableWidth=0;//JK
function changeColWidth()//JK:本函数功能主要是进行宽度对齐,本函数只执行一次
{
if(document.all("the10Table")==null) return false;
if(the11Table.rows[0].style.display=="none")return false;
The10TableWidth=the10Table.offsetWidth;
var theThe10TableColsNum=the10Table.rows[0].cells.length;
for(var i=0;i<theThe10TableColsNum-1;i++)//将左半部分的宽度对齐
{
the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
if(the10Table.rows[1]) the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
}
var theThe11TableColsNum=the11Table.rows[0].cells.length;
for(var i=0;i<theThe11TableColsNum;i++)//将右半部分的宽度对齐
{
the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
if(the11Table.rows[1]) the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
}
the00Div.innerHTML="<table width='100%' id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the10Table.rows[0].outerHTML+"</table>";
the01Div.innerHTML="<table width='100%' id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the11Table.rows[0].outerHTML+"</table>";
the11Table.style.width=the11Table.offsetWidth;
the01Div.style.width=the11Div.style.width;
the10Table.rows[0].style.display="none";//去掉表头行,也可以把本行去掉
the11Table.rows[0].style.display="none";//同上
changeDivHeight();
document.body.onresize=changeDivHeight;
}function changeDivHeight()//JK:本函数主要用于根据当前窗口大小及表单所在位置来确定卷动条的宽与高,其中部分数字可以自动调整一下(比如其中的30,20两个数值,它与其它tag的margin设置有关
{
if(document.all("the10Table")==null) return false;
var theTopToBody=the10Div.offsetTop;
var theOffsetElement=the10Div;
while(theOffsetElement=theOffsetElement.offsetParent)
theTopToBody+=theOffsetElement.offsetTop;
var newHeight=document.body.clientHeight-theTopToBody-30;
if(the10Table.offsetHeight<newHeight-30){
the10Div.style.height=null;
the11Div.style.height=null;
}
else if(newHeight>10){
the10Div.style.height=newHeight;
the11Div.style.height=newHeight;
}
var the11DivWidth=document.body.clientWidth-The10TableWidth-20;
if(the11DivWidth>30)
{
the01Div.style.width=the11DivWidth;
the11Div.style.width=the11DivWidth;
}
}</script><body onresize=changeDivHeight()>
<br/>
<font color=red>JK认为此效果华而不实,使用后会给其它的编码带来麻烦, 强烈建议慎用</font><br/><br/>用的时候需要注意的主要有:<br/>
1.几个div的ID,以及table的ID,JK已将他们写死在程序里<br/>
2.请定义行高(在本demo中,为“<font color=blue>height=22</font>”<br/>
3.重点注意几个div的onscroll事件<br/>
4.在实际使用中,将按钮的事件赋给body.onload即可<br/>
<input type=button value="Fix the head tr" onclick="changeColWidth()">
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td valign=top width=1%>
<div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
</div><div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
<table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22 >
<td nowrap bgcolor="#66CCFF" >Thank you!</td>
<td nowrap bgcolor="#66CCFF" >You are welcome!</td>
</tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr></table>
<br/>
</div>
</td>
<td valign=top >
<div id=the01Div style="overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
</div><div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
<table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap bgcolor="#66CCFF" >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
<td nowrap bgcolor="#66CCFF" >I am fine! I am fine! I am fine! I am fine! </td>
</tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr>
<tr height=22><td>a</td><td> </td></tr></table>
<br/>
</div>
</td>
</tr>
</table>
</body>
</html>
<table width="778" border="1" cellpadding="0" cellspacing="0" style="overflow:scroll">
<tr align="center">
<td width="150">标题一</td>
<td width="150">标题二</td>
<td width="150">标题三</td>
<td width="150">标题四</td>
<td width="178">标题五</td>
</tr>
<tr>
<td colspan="5">
<div style="height:500;background-Color:snow;overflow:auto" id=user>
<table width="778" border=1 cellpadding="0" cellspacing="0">
<% for i=0 to 50 %>
<tr><td width="150">1</td>
<td width="150">1</td>
<td width="150">1</td>
<td width="150">1</td>
<td width="160">1</td></tr>
<%next%>
</table>
</div>
</td>
</tr>
</table>
</body>
<script>
function myPrint()
{
document.all.item("print").style.visibility="hidden";
window.print();
document.all.item("print").style.visibility="visible";
}
</script>
哈哈,感谢感谢
刚打印了一页
呵呵不错蓝月的太长了,我也找到解决办法了,呵呵呵以后遇到问题再来这个帖子看你的啦--不过非常感谢:)呵呵,你可以使用六段的这个.很不错,你可以把表格的宽度做小一点,这样就不会在有下拉条的时候对不齐了我不是做页面的-------晕菜,呵呵