能不能在网页上不用控件就实现 grid 功能?

也许我有你要的，比较长！！！
分几次考过来：
一.style:(<head>与</head>中)<style>
.table4{
border-top: 0px double #000000;
border-right: 3px double #000000;
border-bottom: 1px double #000000;
border-left: 0px double #000000;
}
.table5{
border-top: 1px double #000000;
border-right: 1px double #000000;
border-bottom: 1px double #000000;
border-left: 0px double #000000;
}
.table6{
border-top: 0px double #000000;
border-right: 1px double #000000;
border-bottom: 1px double #000000;
border-left: 0px double #000000;
}
.table7{
border-top: 1px double #000000;
border-right: 1px double #000000;
border-bottom: 1px double #000000;
border-left: 1px double #000000;
}
.table8{
border-top: 0px double #000000;
border-right: 1px double #000000;
border-bottom: 3px double #000000;
border-left: 0px double #000000;
}
.table10{
border-top: 1px double #000000;
border-right: 3px double #000000;
border-bottom: 3px double #000000;
border-left: 1px double #000000;
}
.table11{
border-top: 1px double #000000;
border-right: 3px double #000000;
border-bottom: 3px double #000000;
border-left: 0px double #000000;
}
.table12{
border-top: 0px double #000000;
border-right: 3px double #000000;
border-bottom: 3px double #000000;
border-left: 1px double #000000;
}
.table13{
border-top: 0px double #000000;
border-right: 3px double #000000;
border-bottom: 3px double #000000;
border-left: 0px double #000000;
}
.table14{
border-top: 1px double #000000;
border-right: 1px double #000000;
border-bottom: 3px double #000000;
border-left: 0px double #000000;
}
.dtext1{
width:90px;
height:14px;
border:0px;
background-color:#80FF80;
text-align:center;
font-size: 10pt;
}
.dtext2{
width:90px;
height:14px;
border:0px;
background-color:#80FFFF;
text-align:right;
font-size: 10pt;
}
.dtext3{
width:60px;
height:14px;
border:0px;
background-color:#80FFFF;
text-align:right;
font-size: 10pt;
}
.dtext5{
width:60px;
height:14px;
border:0px;
text-align:right;
font-size: 10pt;
}
.dtext6{
width:170px;
height:14px;
border:0px;
text-align:left;
font-size: 10pt;
}
.dtext7{
width:90px;
height:14px;
border:0px;
text-align:right;
font-size: 10pt;
}
.font3{
font-size: 11pt;
}
</style>

二.<body>与</body>中:<form name=myform><div id=cdv0 style="visibility:hidden;width:17;">
  <table width=1 height=103 cellspacing=0 cellpadding=0 bgcolor="#80FF80">
    <tr><td align=center class=table7><font class=font3>哈哈哈</font></td></tr>
  </table>
</div><div id=cdv1 style="visibility:hidden;position:absolute;width:297;">
  <table cellspacing=0 cellpadding=0>
    <tr bgcolor="#80FF80">
      <td class=table2 width=236><font class=font3> </font></td>
      <td class=table2 width=61 align=center><font class=font3>哈哈</font></td>
    </tr>
  </table>
</div><div id=cdv2 style="visibility:hidden;position:absolute;overflow-x:hidden;width:637">
  <table cellspacing=0 cellpadding=0>
    <tr bgcolor="#80FF80">
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
      <td class=table5 align=center><input type=text class=dtext1 value="" readonly tabindex=-1 name=x></td>
    </tr>
  </table>
</div><div id=cdv3 style="visibility:hidden;position:absolute;overflow-y:hidden;width:297;height:85;">
  <table cellspacing=0 cellpadding=0>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext5 value="" readonly tabindex=-1 name=x></td>
      <td class=table4><input type=text class=dtext6 value="" readonly tabindex=-1 name=x></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
  </table>
</div>

二：继续<div id=cdv4 style="visibility:hidden;position:absolute;overflow-x:hidden;overflow-y:scroll;width:653;height:85;">
  <table cellspacing=0 cellpadding=0>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>

二：继续
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
      <td class=table6><input type=text class=dtext7 value="" readonly tabindex=-1 name=x></td>
    </tr>
  </table>
</div><table cellspacing=0 cellpadding=0><tr><td></td></tr></table><div id=cdv5 style="visibility:hidden;width:314">
  <table cellspacing=0 cellpadding=0>
    <tr>
      <td class=table10 width=253 bgcolor="#80FF80" align=right><font class=font3>哈哈哈哈</font></td>
      <td class=table11 width=60 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table12 bgcolor="#80FF80" align=right><font class=font3>哈哈哈哈哈</font></td>
      <td class=table13 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr>
      <td class=table3 bgcolor="#80FF80" align=right><font class=font3>哈哈哈</font></td>
      <td class=table4 bgcolor="#80FFFF"><input type=text class=dtext3 value="" readonly tabindex=-1 name=x></td>
    </tr>
  </table>
</div>

二：继续
<div id=cdv6 style="visibility:hidden;position:absolute;overflow-x:scroll;width:637;">
  <table cellspacing=0 cellpadding=0>
    <tr bgcolor="#80FFFF">
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table14 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr bgcolor="#80FFFF">
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table8 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
    </tr>
    <tr bgcolor="#80FFFF">
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
      <td class=table6 align=center><input type=text class=dtext2 value="" readonly tabindex=-1 name=x></td>
    </tr>
  </table>
</div></form>

三：js
<script language=javascript>
//************** table initial **************
function divinitial()
{
try
{
cdv1.style.top=cdv0.offsetTop
cdv1.style.left=cdv0.offsetLeft+cdv0.offsetWidth
cdv2.style.top=cdv0.offsetTop
cdv2.style.left=cdv1.offsetLeft+cdv1.offsetWidth
cdv3.style.top=cdv1.offsetTop+cdv1.offsetHeight
cdv3.style.left=cdv1.offsetLeft
cdv4.style.top=cdv3.offsetTop
cdv4.style.left=cdv2.offsetLeft
cdv6.style.top=cdv5.offsetTop
cdv6.style.left=cdv2.offsetLeft

cdv0.style.visibility=""
cdv1.style.visibility=""
cdv2.style.visibility=""
cdv3.style.visibility=""
cdv4.style.visibility=""
cdv5.style.visibility=""
cdv6.style.visibility=""
}
catch(err){}
}
divinitial()function cdv4scl()
{
cdv3.scrollTop=cdv4.scrollTop
}
cdv4.onscroll=cdv4sclfunction cdv6scl()
{
cdv2.scrollLeft=cdv6.scrollLeft
cdv4.scrollLeft=cdv6.scrollLeft
}
cdv6.onscroll=cdv6scl
//*******************************************
</script>终于贴完啦

好多次了.http://expert.csdn.net/expert/topic/2484/2484929.xml?temp=.3282

hoho,有空偶写一个Library，比较完整的那中

http://xml.sz.luohuedu.net/xml/CoolMenu/coolGrid.htm
这个就很强大了
用的是htc

lsaturn(土星-站了一晚):很明显，这个东西是不错，但是这个东西根本就没有纵向的标题，拖动纵向滚动条，横向的标题也被淹没了。kinzey(kinzey)：
谢谢老兄理解了我的意思，但是你的这个在功能和外观上可能就差了那么一点点。

以前我见过bentoo.net这个公司做的datagrid不错，相当漂亮

哎，我寻寻觅觅了好久，总是找不到满意的datagrid啊。
为什么就是这样难呢？还有哪位虾哥虾姐有好介绍呢？

我有一个active做的类似exl,很不错的

鎖定table指定表首尾和左邊列，不過有時定位上還是有點對不準=============lockTable.htm===========
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=GBK">
<script language="javascript" src="locktable.js"></script>
</head>
<div style="MARGIN: 2pt; OVERFLOW: scroll;width:160px;height:150px;">
<table id="tbl" border=0 cellspacing="1" cellpadding="0" bgcolor=#660000>
<tr><td nowrap bgcolor=#bbbbbb>標題一</td><td nowrap bgcolor=#bbbbbb>標題二</td><td nowrap bgcolor=#bbbbbb>標題三</td><td nowrap bgcolor=#bbbbbb>標題四</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td nowrap bgcolor=#bbbbbb>標題一</td><td nowrap bgcolor=#bbbbbb>標題二</td><td nowrap bgcolor=#bbbbbb>標題三</td><td nowrap bgcolor=#bbbbbb>標題四</td></tr>
</table>
</div>
<script language="javascript">
LockTable(tbl,1,1,1);
</script>
===========lockTable.js=================
function DrawTable(scrTable,newTable,iStart,iEnd,jEnd){
var i,j,k=0,newTR,newTD,intWidth=0,intHeight=0;
newTable.mergeAttributes(scrTable);
for (i=iStart;i<iEnd;i++){
newTR=newTable.insertRow(k)
newTR.mergeAttributes(scrTable.rows[i]);
intHeight += scrTable.rows[i].offsetHeight;
intWidth=0;
for(j=0;j<(jEnd==-1?scrTable.rows[i].cells.length:jEnd);j++){
newTD=scrTable.rows[i].cells[j].cloneNode(true);
intWidth+= scrTable.rows[i].cells[j].offsetWidth;
newTR.insertBefore(newTD);
newTD.style.pixelWidth=scrTable.rows[i].cells[j].offsetWidth;
}
k++
}
newTable.style.pixelWidth=intWidth;
newTable.style.pixelHeight=intHeight;
}function LockTable(arTable,ColNum,RowHead,RowFoot){
arTable.HeadRow=RowHead;
var objDivMaster=arTable.parentElement;
if(objDivMaster.tagName!='DIV')return;
if((arTable.offsetHeight > objDivMaster.offsetHeight)&&(arTable.offsetWidth > objDivMaster.offsetWidth)){
if((ColNum > 0) && (RowHead > 0)){
var objTableLH=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLH.insertBefore(newTBody);
objTableLH.id="objTableLH";
objDivMaster.parentElement.insertBefore(objTableLH);
DrawTable(arTable,objTableLH,0,RowHead,ColNum)
objTableLH.srcTable=arTable;
with(objTableLH.style){
zIndex=804;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
}

if((ColNum > 0) && (RowFoot > 0)){
var objTableLF=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLF.insertBefore(newTBody);
objTableLF.id="objTableLF";
objDivMaster.parentElement.insertBefore(objTableLF);
DrawTable(arTable,objTableLF,arTable.rows.length - RowFoot,arTable.rows.length,ColNum)
objTableLF.srcTable=arTable;
with(objTableLF.style){
zIndex=803;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - objTableLF.offsetHeight - 16;
}
}
} if((RowHead > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivHead=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivHead);
var objTableHead=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableHead.id="HeadTar";
objTableHead.style.position="relative"
objTableHead.insertBefore(newTBody);
DivHead.insertBefore(objTableHead);
DrawTable(arTable,objTableHead,0,RowHead,-1)
HeadTar.srcTable=arTable;
with(DivHead.style){
overflow="hidden";
zIndex=802;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute';
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll1);
}

if((RowFoot > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivFoot=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivFoot);
var objTableFoot=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableFoot.insertBefore(newTBody);
objTableFoot.id="FootTar";
objTableFoot.style.position="relative"
DivFoot.insertBefore(objTableFoot);
DrawTable(arTable,objTableFoot,arTable.rows.length - RowFoot,arTable.rows.length,-1)
objTableFoot.srcTable=arTable;
with(DivFoot.style){
overflow="hidden";
zIndex=801;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
}
objDivMaster.attachEvent("onscroll",divScroll2);
}

if((ColNum > 0) && (arTable.offsetWidth > objDivMaster.offsetWidth)){
var DivLeft=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivLeft);
var objTableLeft=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLeft.insertBefore(newTBody);
objTableLeft.id="LeftTar";
objTableLeft.style.position="relative";
DivLeft.insertBefore(objTableLeft);
DrawTable(arTable,objTableLeft,0,arTable.rows.length,ColNum)
LeftTar.srcTable=arTable;
with(DivLeft.style){
overflow="hidden";
zIndex=800;
pixelWidth=objDivMaster.offsetWidth - 16
pixelHeight=objDivMaster.offsetHeight - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll3);
}
}function divScroll1(){
var tbl=document.all('HeadTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
document.all('HeadTar').style.pixelLeft= -parDiv.scrollLeft;
}function divScroll2(){
var tbl=document.all('FootTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
document.all('FootTar').style.pixelLeft= -parDiv.scrollLeft;
}function divScroll3(){
var tbl=document.all('LeftTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
document.all('LeftTar').style.pixelTop= -parDiv.scrollTop;
}

调试易

能不能在网页上不用控件就实现 grid 功能?

解决方案 »