固定部分表头及对应数据行(只有一点js)

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量111 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/kongdf/blog/884876
版权


 有时候，我们要实现一个效果：部分表头及对应数据固定，而剩余部分可以左右滚动，看起来会有点意思。我看过jQuery的固定表头，不过感觉写的复杂了，没必要非

弄那么复杂的js，只要些许的CSS控制也能轻松搞定的。

效果图：

 

相关代码如下：

 

   <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script><style type="text/css">
    body { background-color: #daf2ff;margin:0px 6px 0px 6px; padding:0px;}
    #form1{margin:0px; padding:0px;}.font02{
 FONT-FAMILY:"宋体";
 FONT-SIZE:12px;
 color:#ffffff;
}
    .thead{ background:url(../Images/bj01.gif)  repeat-x;color:#005B9A;  
    font-weight:bold;border:#AECCEB 1px 
    solid;background-color:#FFFFFF; height:16px;white-space:nowrap; word-break:all;}
    .tbody{ color:#000000;   font-weight:normal; background-color: #ffffff;  border:#AECCEB 1px  solid;
    white-space:nowrap; word-break:all;height:20px;cursor:pointer;} 
     .tbodyselected{ color:#000000;  font-weight:normal; background-color: #8090f1;
      border:#AECCEB 1px  solid;height:20px;cursor:pointer;} 
     .bg22{ background-color:#D4E6FE; color:#000000; font-size:12px; font-weight:normal;
     height: 20px;border:#AECCEB 1px  solid; cursor:pointer;}
    .pagerlink{padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;border:#9AAFE5 1px  solid;color: #2E6AB1;}
    .pagerbutton{
    background-color: #E8EDF0;border:#C8D3DE 1px  solid; cursor:hand;
    }
    .pagertextbox{border:#7E9DB9 1px  solid; }  
    div{margin:0px; padding:0px;width:100%;}
    #TablescrollDiv1 td{cursor:pointer;}
</style>

<body>
    <form id="form2" runat="server">
     <table id="trheight"  width="100%" border="0" align="center" cellpadding="0"  cellspacing="0"
       style="background-color:#247BD7; " >
    <tr>
        <td style="height:28px; background-color:#FFFFFF;  width:100%;" id="tdTitle">
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td  width="4" height="28">
                    <img src="../Images/rbg21.jpg" width="4" height="28" ></td>
                <td width="300" background="../Images/rbg22.jpg">
                     </td>
                <td align="center" background="../Images/rbg22.jpg" class="font02">
                    2011年开发区规建局项目配套工程一览表</td>
                <td width="300" align="left" background="../Images/rbg22.jpg">
                    <table border="0" cellspacing="0" cellpadding="0" style="width:91%; height: 11px; ">
        <tr>
                         <td align="center">
<input type="image" name="btn_Look" id="btn_Look" src="../Images/icon7.gif" border="0"
οnclick="location='../ghj/ProjectRelationDetail.aspx';return false;" language="javascript"
style="height:11px;width:42px;" /> </td>
<td align="center">
<input type="image" name="btn_Add" id="btn_Add" src="../Images/icon2.gif" border="0"
οnclick="location='../ghj/ProjectRelationDetail.aspx';return false;" language="javascript"
style="height:11px;width:42px;" /> </td>
<td align="center">
<input type="image" name="btn_Edit" id="btn_Edit" src="../Images/icon4.gif" border="0"
οnclick="location='../ghj/ProjectRelationDetail.aspx';return false;" language="javascript"
style="height:11px;width:42px;" /></td>
<td align="center">
<input type="image" name="btn_Del" id="btn_Del" src="../Images/icon3.gif" border="0"  
language="javascript" style="height:11px;width:42px;" /> </td>
 <td align="center">
 <input type="image" name="btn_Search" id="btn_Search" src="../Images/icon6.gif" border="0"
 style="height:11px;width:42px;" /> 
                                 <script type="text/javascript">
                                 $(document).ready(function(){
                                 $("[id^='btn_']").mouseover(function(){
                                 $(this).css("cursor","pointer");
                                 });
                                 
                                 });
                                 </script>
                                  </td>
                            <td align="center">
                                <img src="../Images/icon5.gif" width="42" height="11"
                                style="display: none" ></td>
                        </tr>
                    </table>
                </td>
                <td width="4">
                    <img src="../Images/rbg23.jpg" width="4" height="28"></td>
            </tr>
        </table>
        </td>
    </tr> 
       <tr>
        <td  id="TdHeight" style="text-align:left; background-color:#DAF2FF; "  valign="top">
        <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#247BD7">
                            <tr>
      <td id="trdiv1" align="right" valign="top" style="height:100%; background-color:#FFFFFF; width:98%;"> 
                                        <table  border="0" align="center" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td height="1">
                                                </td>
                                            </tr>
                                        </table>
                                        <table id='Table2' style="border-collapse: collapse; width:100%;"
                                         align="center" cellpadding="0"  cellspacing="0">
                                         <tr>
                                         <td style="width:10%" align="left"  valign="top">
 <div style="margin:0px; padding:0px;  position:absolute; left:6px;  z-index:81; width:auto;"  id="divHead">
                               <table id='Tablescroll' style="border-collapse: collapse; width:10%;"
                                         align="left" cellpadding="2"  cellspacing="0">
                                            <thead>
                                                <tr  >
                                                    <td    align="center"  class="thead"  style="width:45%;">
                                                   序号</td>
                                                    <td align="center" class="thead" style="width:55%;">
                                                        配套单号</td>
                                                </tr>
                                            </thead>
                                          
                            <tbody>
                                                <tr style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >1</td>
                                                    <td align="center"    class="tbody" >2010076</td>
                                                </tr> 
                                                <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >2</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr> 
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >3</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>  
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >4</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>   
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >5</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>  
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >6</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>  
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >7</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>  
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >8</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>  
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >9</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>  
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                     <td align="center"    class="tbody" >10</td>
                                                    <td align="center"    class="tbody" >2010092</td>
                                                </tr>  
                                            </tbody>
                                            </table>
                                        </div> </td>
                                         <td style="width:90%" align="center" valign="top">
 <div style="margin:0px; padding:0px;  overflow-x:scroll;overflow-y:hidden;  z-index:80;
  position:absolute;
                               left:6px; padding-left:10%; width:89%;"  id="divScroll">
                <table id='TablescrollDiv1' style="border-collapse: collapse; width:120%;"
                                         align="left" cellpadding="2"  cellspacing="0">
                                            <thead>
                                                <tr  >
                                                     <td    align="center"  class="thead" style="width:10%;">
                                                   项目名称</td>
                                                    <td  align="center" class="thead"   style="width:9%;">
                                                        配套内容</td>
                                                    <td  align="center" class="thead"  style="width:10%;">
                                                        项目地点</td>
                                                    <td  align="center" class="thead"  style="width:7%;">
                                                        接单日期</td>
                                                    <td  align="center" class="thead" style="width:7%;">
                                                        审批日期</td>
                                                    <td align="center" class="thead"  style="width:7%;">
                                                        转发日期</td>
                                                    <td  align="center" class="thead"  style="width:9%;">
                                                        实施部门</td>
                                                    <td  align="center" class="thead"  style="width:9;">
                                                    施工单位</td>
                                                    <td  align="center" class="thead"  style="width:7%;">
                                                    项目经理（联系方式）</td>
                                                    <td  align="center" class="thead"  style="width:8%;">
                                                    进度综述</td>
                                                    <td  align="center" class="thead"  style="width:9%;">
                                                    负责工程</td>
                                                    <td  align="center" class="thead"  style="width:5%;">
                                                    需协调解决事项</td>
                                                    <td  align="center" class="thead"  style="width:7%;">
                                                    备注</td>
                                                </tr>
                                            </thead>
                                          
                                            <tbody>
                                                <tr style="cursor:pointer;" οnclick="this.className='tbodyselected';"
                                                 οndblclick="location.href='../ghj/ProjectRelationDetail.aspx'; "  >
                                                    <td align="center"    class="tbody" >
                                                    <a href="../ghj/projectRelationDetail.aspx" target="_self">景智光电项目</a></td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >东至蓬溪路，南至金湖路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >胜樊市政</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土已完成80%</td>
                                                    <td align="center"    class="tbody" >溪蓬北路延南段监理</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr> 
                                                <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至丰庆路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >一华市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" >蓬溪北路南延段监理</td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" >蓬溪北路南延段监理</td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                 <tr   οnclick="this.className='tbodyselected';"  style="cursor:pointer;">
                                                    <td align="center"    class="tbody" >开发区规建局规划科</td>
                                                    <td align="center"    class="tbody" >填土</td>
                                                    <td align="center"    class="tbody" >北至庆丰路，东至长江路</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-13</td>
                                                    <td align="center"    class="tbody" >2010-6-17</td>
                                                    <td align="center"    class="tbody" >建管所</td>
                                                    <td align="center"    class="tbody" >华一市政有限公司</td>
                                                    <td align="center"    class="tbody" >李钧</td>
                                                    <td align="center"    class="tbody" >填土施工单位已确定（衡山变等地块）</td>
                                                    <td align="center"    class="tbody" ></td>
                                                    <td align="center"    class="tbody" >无进场道路</td>
                                                    <td align="center"    class="tbody" ></td>
                                                </tr>
                                                </tbody>
                                                </table>
                                                     </div>
                                         </td>
                                         </tr>
                                         </table>
                                </td>
                            </tr>
                        </table> 
     
      </td> </tr> 
</table>
   <div class="bg40" style="padding:0px; margin:0px; z-index:80; position:absolute;" id="divPageHelper">
<div id="PagerHelper1_PagePanel" language="javascript"
οnkeypress="javascript:return WebForm_FireDefaultButton(event, 'PagerHelper1_Button1')">

  <table  cellspacing="0" cellpadding="0" border="0" align="center" width="100%"  
  style="height:21px; background-color:#D4E6FE;">
     <tr class="">

       
            <td   align="center"  valign="middle">
               
    第 <span id="PagerHelper1_PageNumber" style="color:Red;">1</span> 页/共
    <span id="PagerHelper1_PageTotal" style="color:Red;">2</span>  页 
   
                      共有 <span id="PagerHelper1_RecordNumber" style="color:Red;">25</span>
                      条记录 
                     <a id="PagerHelper1_lnkFirst" disabled="disabled">首页</a> |
                 <a id="PagerHelper1_lnkPrevious" disabled="disabled">上一页</a> |
                 <a id="PagerHelper1_lnkNext" href="#">下一页</a> |
                 <a id="PagerHelper1_lnkLast" href="#">尾页</a> 
              
                            转到
                      <input name="PagerHelper1:SelectPage" type="text" id="PagerHelper1_SelectPage"
                      class="pagertextbox" maxlength="8" style="height:15px; width:32px;" />
                       <input type="image" name="PagerHelper1:Button1" id="PagerHelper1_Button1"
                        src="../Images/GO.gif" align="top" border="0" style="height:17px;width:33px;" />  
              
              </td>
          </tr>
             </table>
            
            
</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#PagerHelper1_Button1").click(function(){
    return  check_txtbox();
    });
});
function check_txtbox()
{ 
    var PageNum=document.getElementById("PagerHelper1_SelectPage").value;
    if(PageNum.trim()=="")
   {
    alert('请输入页码!');
        document.getElementById("PagerHelper1_SelectPage").focus();
        return false;
   }
    if(isNaN(PageNum.trim()))
    {
        alert('您输入的页码包含其他字符,请输入正确的页码!');
        document.getElementById("PagerHelper1_SelectPage").focus();
        return false;
    }
    else
    {
        if(parseInt(PageNum.trim())<=0)
        {
            alert('您输入的页码过小,请输入正确的页码!');
            document.getElementById("PagerHelper1_SelectPage").focus();
            return false;
        }
        var pageCount=parseInt(document.getElementById("PagerHelper1_PageTotal").innerHTML);
        if(parseInt(PageNum.trim())>pageCount)
        {
            alert('您输入的页码过大，请输入正确的页码!');
            document.getElementById("PagerHelper1_SelectPage").focus();
            return false;
        }
    }
    document.getElementById("PagerHelper1_SelectPage").value= "" + PageNum;return true;
}
var arrCheckAll = document.getElementsByTagName("input");
var chkAll=null;
for(var i=0;i<arrCheckAll.length;i++){
    if(arrCheckAll[i].id && arrCheckAll[i].id.indexOf("chkAll")>=0){
        arrCheckAll[i].οnclick=function(){
            e=event.srcElement ? event.srcElement:event.target;
 
            for(var j=0;j<arrCheckAll.length;j++){
                if(arrCheckAll[j].id && arrCheckAll[j].id.indexOf("chkEleID")>=0){
                    arrCheckAll[j].checked=e.checked;
                }
            }
        };
    }
}
//为上面提供各个JS验证方法提供.trim()属性  
            String.prototype.trim=function(){  
                return this.replace(/(^\s*)|(\s*$)/g, "");   
            }
</script>
 
 <input type="hidden" name="hidIDinfo" id="hidIDinfo" />
       </div>
  <div id="result" ></div> 
                                        <input id="Hidden1"  type="hidden" />
    <input type="hidden" name="hidPageSize" id="hidPageSize" value="8" />  
    </form>
   
    <script type="text/javascript" defer="defer">
    
$(document).ready(function(){
var H=parseInt($("#divScroll").css("padding-left"));
var Left=parseInt($("#TablescrollDiv1").position().left);//固定表头及其数据部分
$("#divHead").css("width",parseInt(Left));
$("#Tablescroll").css("width",parseInt(Left));
var T=parseInt($("#divScroll").position().top);//移动数据上方位置
var divHeight=parseInt($("#divScroll").css("height")); //alert(T+","+divHeight+","+50);
$("#divPageHelper").css("top",parseInt(T+divHeight));//分页控件位置定位
//var TablescrollLeft=$("#Tablescroll").position().left;
 //$("#divScroll").(parseInt(TablescrollLeft)) ;
});
</script>
</body>

主要的内容包含在“id='Table2' ”的table中，具体的其他东西就不用赘言了，希望有所裨益，请大家赐教！

转载于:https://my.oschina.net/kongdf/blog/884876

chiyu4415
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过
09-25
首先，问题的核心在于，当表格内容过多导致出现滚动条时，滚动条滚动时表头无法与数据列保持对应。为了解决这个问题，我们可以创建两个独立的部分：一个用于显示表头，一个用于显示表格内容。表头部分我们将使用CSS...
JavaScript:固定table的表头
09-19
thead部分用于存放表头，tbody则存放具体的数据行。 2. **CSS 预处理**：虽然JavaScript是主要的实现手段，但CSS也起着至关重要的作用。我们可以设置表格的CSS样式，如position属性，以便于JavaScript操作。通常，...
Table布局核心：table标签设置 border="0" cellspacing="0" cellpadding="0"，td设置左边框和上边框，table设置下边框和右边框
qq_24511933的博客
02-22 8547
Table布局核心：table标签设置 border="0" cellspacing="0" cellpadding="0"，td设置左边框和上边框，table设置下边框和右边框 Document td{ border-left:1px solid red; border-top:1px solid red; padding:20px 40px; } table{ bord
web开发：表头固定（利用jquery实现）
dianyifu2484的博客
11-08 113
表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表格就无从下手。而且例子中大多只能满足限定高度的情况，如果限定宽度，出现横向滚动条就无能为力了。 我的目的就是要像jquery-ui那样，找到页面上存在的表格，调用一个方法就可以实现固定表头的功能。趁着动手学习写j...
jQuery实现表头固定效果
weixin_34326558的博客
05-23 85
一、新建一js文件jQuery_FixedTableHead.js 内容如下： jQuery.fn.CloneTableHeader=function(tableId,tableParentDivId){ varobj=document.getElementById("tableHeaderDiv"+tableId); if(obj){ ...
jquery,插件固定表格表头
东明之羞的博客
09-25 2753
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，目前比较粗糙，不过可以达到相同效果 效果图 使用方式： 引入jquery文件 &lt;script type="text/javascript" src="jquery-1.10.1.min.js"&gt;&lt;/script&gt;   引入插件脚本 &lt;script type="t...
jQuery - 综合实例 - 固定表头，滚动表格内容
胡争辉
12-02 8773
jQuery - 综合实例 - 固定表头，滚动表格内容 [源代码]                                 $(document).ready(function () {                 for (var y = 1; y                     $("#table_y").append
JavaScript实现两个Table固定表头根据页面大小自行调整
10-26
在网页设计中，固定表头是一项常见的需求，尤其是在处理大量数据时，保持表头可见能够帮助用户更好地理解和浏览表格内容。本示例介绍如何使用JavaScript实现两个Table的固定表头，并且可以根据页面大小自动调整。...
基于jquery的固定表头和列头的代码
10-28
首先，固定表头（Fixed Header）是指在用户滚动页面时，表格的头部行（通常包含列名）始终保持在屏幕顶部，使得用户在查看表格下方数据时仍能清晰地看到列的标识。这提高了用户体验，尤其是在处理长表格时。 其次，...
响应式表格之固定表头的简单实现
09-01
当涉及到数据密集型内容，如表格，固定表头的设计尤为重要，因为它能保持用户在滚动浏览长表格时对列名的可见性，提高可读性和操作便捷性。本文将详细介绍如何简单实现响应式表格中的固定表头。 首先，我们通过创建...
table表格自动滚动
qq_40385153的博客
11-25 1275
table表格自动滚动 <!doctype html> <html> <head> <meta charset="utf-8"> <title>table表格无缝向上滚动</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .
JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】
charlatans的博客
08-12 3671
本文主要介绍关于JS或Vue中如何进行表头，列固定，可以根据实际应用场景应用于原生，Vue，移动端，小程序中。实现逻辑：表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。【当要进行滚动时，只要对滚动事件进行绑定，让表头和列头显示对应的内容就完成了滚动的操作】下面有Vue组件的和JavaScript原生的代码，可以直接运行查看逻辑和效果。.........
SQL中数据分页，每页固定行数，不足补空行
lemon627497658的博客
05-17 2666
创建表USE [ZWS]GO/****** Object:  Table [dbo].[test]    Script Date: 2018/5/17 21:26:29 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCREATE TABLE [dbo].[test]( [ID] [int] NULL, [val] [varchar](50)...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 445
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 617
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 200
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 245
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 308
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
遍历每一行读取个表头对应的数据
07-14
要遍历每一行并读取表头对应的数据，你可以使用`table`对象的行索引和列索引来获取特定单元格的值。以下是一个示例： ```matlab T = readtable('data.csv'); headerNames = T.Properties.VariableNames; % 遍历每...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值