.net中固定行和列的通用模板

      .net中<table></table>算是用到频率非常高的标签了,那么用<table></table>标签建立的表格如果想要想Excel表那样可以固定行和列要则样实现呢?在别处找到了这个固定行和列的方法,我把它稍作改动,编辑成为一个通用的模板,供大家参考使用。

<head runat="server">
    <title>固定行和列</title>

     <script type ="text/javascript">
         function syncscroll(obj) {
             x.innerHtml = obj.scrollLeft;
             y.innerHtml = obj.scrollTop;
             scroll1.children[0].style.position = "relative";
             scroll2.children[0].style.position = "relative";
             scroll1.children[0].style.left = "-" + obj.scrollLeft;
             scroll2.children[0].style.top = "-" + obj.scrollTop;
         }
            </script>
  </head>
<body>
    <form id="form1" runat="server" >
    <table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <%--左上begin--%>
  <td> 

<div>

<%--此div中添加要固定行和列的交汇处--%>

</div>
  </td>
 <%--右上--%>
 <td>
  <div id="scroll1" style="width:450;overflow:hidden;" runat="server">
  
  </div>
 </td>
 </tr>
 <tr>
 <%--左下--%>
  <td>
   <div id="scroll2" runat="server" style="height:150px;overflow-y:hidden;overflow-x:scroll">
   </div>
  </td>
  <%--右下--%>
  <td>
   <div id="scroll3" runat="server" style="width:450px;height:150px;overflow:scroll;" onscroll="javascript:syncscroll(this)">
   
   </div>
  </td>
 </tr>
</table>
<p id="y"></p>
<p id="x"></p>
     </body>
</html>

只要把左上、右上、左下、右下的内容分别放到4个div中就可以是想行和列的固定啦!

注:在有些浏览器中不支持此方法,建议使用IE浏览器。

posted @ 2013-04-15 20:24  丫丫是个小码农  阅读(316)  评论(0编辑  收藏  举报