淘宝商城(天猫)高级技术专家.3年研发+3年性能测试调优/系统测试+4年团队管理与测试架构、研发系统实践. 新舞台新气象, 深化测试基础架构及研发架构,希望能在某个技术领域成为真正的技术大牛。欢迎荐才http://bbs.51testing.com/viewthread.php?tid=120496&extra=&page=1 .邮件: jianzhao.liangjz@alibaba-inc.com,MSN:liangjianzhao@163.com.微博:http://t.sina.com.cn/1674816524

改写jQuery实现固定表头,滚动内容

上一篇 / 下一篇  2008-10-26 00:57:04 / 个人分类:java性能监控与调优

参考http://blog.csdn.net/hu_zhenghui/archive/2007/12/02/1911733.aspx

 

 

原来事件处理采用:

 

<scrīpt src="scrīpts/jQuery.js"></scrīpt>

 <scrīpt>

     $(document).ready(function () {

       

         $("#tableContainer").scroll(function () {

            // $("#divx").get(0).scrollLeft = this.scrollLeft;

             $("#divy").get(0).scrollTop = this.scrollTop;

         });

         

         

     });

 </scrīpt>

 

例子采用3个表,存在列宽/行高同步的问题。

 

偶改写了事件,特别注意标红色的style要素overflow

 

 

      <div id="tableContainer"style="width:1000px; height:600px; overflow:scroll">

<table border="1" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" id="scrollTable" >

<thead>

      <tr>

      <th>

                    <div>标题</div>

</th>

<tr>

</thead>

<tbody id="tbSCMProject" class="tbSCMProject">

</tbody> 

 

 

<td valign="top" >

                                 <div id="divy" style="width:300px; height:600px; overflow:hidden">  

<table id="table_y" border="3">

                                                 

                  <tr><div style="height:51.5px">内容      </div>

                           </tr>

                                                                                                                                  </table>          

 

</div>

 

 

<scrīpt  language="javascrīpt">  

 

 var divScrollHander= function()

{

                                  var thisContainer = document.getElementById('tableContainer');

                                  var ōbjdivy =   document.getElementById('divy');

                                  if (!thisContainer || !objdivy)

                                  {

                                                       

                                                 return;

                                  }    

                                  

                                  objdivy.scrollTop=thisContainer.scrollTop;

   }

   

   

 tableContainer.attachEvent('onscroll',divScrollHander);

   

</scrīpt>

 

</body>

 

 

由于采用2个表,如何让2个表的行高度一致,不至于适配?下面的图看到,需要2个表的同一行移动需要同步。

 

 

 


TAG: jquery 固定表头 内容滚动 javascript java性能监控与调优

 

评分:0

我来说两句

Open Toolbar