各位大侠,有没有做出象GRID一样可以设置固定列的table。。。 固定表最左边的列,固定表的首行:http://jkisjk.vip.sina.com/code/html/fixHeadTr.htm把窗口调小一点就可以看到效果。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <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{ 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><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> 谢谢JK_10000(JK1),我就是用这个方法做的,总感觉不太舒服。我本想把左边的固定列做一个浮动层,浮在另两个层上(表头层,表体层),但不能定位这个浮动层的位置。有没有更好的办法。谢谢 请问超链接图片的切换的实现 腾讯的 JET框架怎么样? 用JS调用OCX,能收到事件,但事件传递的参数为什么是undefined Ext 获取返回数据问题 win2003脚本出错错误 如何设置下列列表的宽度 改变背景为什么没有反应啊?代码没有错啊? onclick="return Juge(this);" 对吗? 如何通过javascript使iframe里的网页刷新?着急!帮忙呀! 有没有办法控制右键菜单项的增减?????急急(50分) 在IE6中运行正常,IE5中就不行,真奇怪。是OPENER.CLOSED的问题吗?? 我想自已做一个菜单,各位帮我找一下div的位置的各种属性
<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
{
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><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>