zoukankan      html  css  js  c++  java
  • .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="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="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浏览器。

    爱开发,爱分享,我是淑女,我是菜鸟程序员,请多指教喽!(*^__^*) 嘻嘻……
  • 相关阅读:
    解决方法 svn checkout 更改用户名密码/断网续传
    解决方法 cannot be resolved as a type
    解决方法 Syntax error on token "enum", invalid Expression
    使用笔记 Sublime text 持更
    解决方法 cvs或svn上下载的新项目无build path
    解决方法 卸载jdk以及重新安装jdk
    配置笔记 eclipse, jdk, tomcat, maven, mysql, alt+/
    ubantu配置java环境变量
    写给自己的!
    数据设计模式
  • 原文地址:https://www.cnblogs.com/SweetyGirl/p/3022775.html
Copyright © 2011-2022 走看看