JS-Demo2：JavaScript版TableGrid，表格头、分页表格冻结,表格头可拉动

本文主要是介绍JS-Demo2：JavaScript版TableGrid，表格头、分页表格冻结,表格头可拉动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
上两天写了一个关于表格头可以拖动：JS-Demo1：JavaScript实现表格列拖动
这次在拖动的效果上，实现表格头冻结等。上图：
代码比较长，感兴趣的朋友，不妨复制看看
代码：
[html]  view plain copy  
    
    
    
    
    
 <!DOCTYPE html>  
 <html>  
   <head>  
     <title>表格冻结</title>  
     <style type="text/css">  
         table{  
             color: #000;  
             font: normal 12px 宋体,tahoma,arial,verdana,sans-serif;  
             table-layout:fixed;  
         }  
         #theadTable,#tfootTable tr{  
             background-color: #CBDDF3;  
             border: 1px solid #7BBDFF;  
         }  
         td,th{  
             white-space: nowrap;  
             overflow:hidden;   
         }  
         td{  
             line-height: 16px;  
         }  
         .dragable{  
             width: 3px;  
             height:100%;   
             cursor: col-resize;  
             /*下面3个样式与效果有一定关系,其他无所谓*/  
             float: right;    
             position: relative;  
             right: 0px;  
         }  
     </style>  
     <!--  
     <script type="text/javascript" src="/jxc/js/jQuery/jquery-1.7.2.js"></script> 
      -->  
       
     <script type="text/javascript">  
     /***************************************************************************/  
     /**  
      * 为了方便看效果,写了个jQuery的简单实现,实际应用中,可以去掉这个，而引用jquery.js，无影响。  
      */  
     function jQuery(expression){  
         expression = expression.substring(1);  
         this[0] = document.getElementById(expression);  
         this.val = function(v){  
             if(v!=undefined) this[0].value = v;  
             else return this[0].value;  
         }  
         return this;  
     }  
     window.$ = jQuery;  
     /***************************************************************************/  
       
     var draging = false;            //是否拖拽中  
     var dragElement = null;     //当前拖拽的th  
     var offsetLeft = 0;             //当前拖拽的th与绝对左坐标  
     var verticalLine = undefined;   //竖线  
     var draggedWidth = 0;           //拖拽时th的宽度，当鼠标mouseup时，th的宽度为该值  
     function mousedown(){  
         if(draging) return;  
         draging = true;  
         dragElement = window.event.srcElement.parentNode;  
         dragElement.theadtd = theadTable.rows(0).cells(dragElement.cellIndex);  
         dragElement.tfoottd = tfootTable.rows(0).cells(dragElement.cellIndex);  
         dragElement.tbodytd = {style:{}};//当表格中没有数据时,赋值这么一个对象,不引起js报错。  
         if(tbodyTable.rows.length>0)//当表格中有数据时  
             dragElement.tbodytd = tbodyTable.rows(0).cells(dragElement.cellIndex);  
           
         offsetLeft = dragElement.offsetLeft;  
         document.body.style.cursor = "col-resize";  
         document.body.onselectstart = function(){return false;};//拖拽的时候，鼠标滑过字的时候，不让选中(默认鼠标选中字的效果,大家都知道)  
         if(verticalLine==undefined){  
             verticalLine = createVerticalLine();  
         }  
     }  
     function mouseup(){  
         if(!draging) return;  
         draging = false;  
         document.body.style.cursor = "auto";  
         document.body.onselectstart = function(){return true};  
         verticalLine.style.display = "none";  
         dragElement.style.width = draggedWidth;  
         dragElement.theadtd.style.width = draggedWidth;  
         dragElement.tbodytd.style.width = draggedWidth;  
         dragElement.tfoottd.style.width = draggedWidth;  
         dragElement = null;  
     }  
     function mousemove(){  
         if(draging && dragElement){  
             if(event.clientX-offsetLeft>0){  
                 draggedWidth = event.clientX-offsetLeft;  
                 verticalLine.style.left = event.clientX+8;  
                 verticalLine.style.display = "block";  
             }  
         }  
     }  
    
     //创建触发拖动表格列的span：<span class="dragable" onmousedown="mousedown();"> </span>  
     function createSpan(){  
         var span = document.createElement("span");  
         span.className = "dragable";  
         span.attachEvent("onmousedown",mousedown);  
         span.innerHTML = " ";  
         return span;  
     }  
    
     //创建拖动时的效果(竖线):<div style="z-index: 10; position: absolute; background-color: #c3c3c3; width: 6px; display: none; height: ?px; top: 24px; left: 608px"></div>  
     function createVerticalLine(){  
         var div = document.createElement("div");  
         div.style.position = "absolute";  
         div.style.display = "none";  
         div.style.backgroundColor = "#C3C3C3";  
         div.style.width = "6px";  
         div.style.height = tbodyDiv.style.height;  
         div.style.top = tbodyTable.offsetTop;  
         div.style.zIndex = "10";  
         div.innerHTML = " ";  
         document.body.appendChild(div);  
         return div;  
     }  
     var mainDiv;  
     var theadDiv,tbodyDiv,tfootDiv;  
     var theadTable,tbodyTable,tfootTable;  
    
     window.onload = function(){  
         mainDiv = $("#mainDiv")[0];  
         theadDiv = $("#theadDiv")[0];  
         tbodyDiv = $("#tbodyDiv")[0];  
         tfootDiv = $("#tfootDiv")[0];  
         theadTable = $("#theadTable")[0];  
         tbodyTable = $("#tbodyTable")[0];  
         tfootTable = $("#tfootTable")[0];  
           
         /* dragable 效果 */  
         //在theadTable中的th内容中添加span  
         var theadThs = theadTable.getElementsByTagName("th");  
         for(var i=0;i<theadThs.length;i++)  
             theadThs[i].appendChild(createSpan());  
           
         theadTable.style.width = tbodyTable.style.width = tfootTable.style.width = Math.max(theadTable.offsetWidth,tbodyTable.offsetWidth,tfootTable.offsetWidth);  
           
         var ths = theadTable.rows(0).getElementsByTagName("th");  
         var tfs = tfootTable.rows(0).getElementsByTagName("td");  
         var tds;//当表格中没有数据时,赋值这么一个对象,不引起js报错。  
         if(tbodyTable.rows.length>0){  
             tds = tbodyTable.rows(0).getElementsByTagName("td");  
         }else{  
             tds = new Array();  
             for(var i=0;i<ths.length;i++){  
                 tds[tds.length] = {style:{},offsetWidth:0};  
             }  
         }  
         if(ths.length!=tds.length && tds.length!=tfs.length){  
             alert("长度不一致");  
         }  
         for(var i=0;i<ths.length;i++){  
             var width;  
             if(ths[i].style.width) width = ths[i].style.width;  
             else if(ths[i].width) width = ths[i].width;  
             else width = Math.max(ths[i].offsetWidth,tds[i].offsetWidth,tfs[i].offsetWidth);  
             if(i!=ths.length-1)  
                 ths[i].style.width = tds[i].style.width = tfs[i].style.width = width;  
         }  
     }  
    
     /**  
      * 当tfootdiv横向滚动时,theadDiv与tbodyDiv同时滚动。  
      * @param tfootDiv  
      */  
     function togetherScroll(scrollingDiv){  
         theadDiv.scrollLeft = scrollingDiv.scrollLeft;  
         tbodyDiv.scrollLeft = scrollingDiv.scrollLeft;  
         tfootDiv.scrollLeft = scrollingDiv.scrollLeft;  
     }  
     </script>  
 </head>  
 <body onmousemove="mousemove();" onmouseup="mouseup();">  
     <span style="font-weight: bold;font-size: 14px;">  
     JavaScript版TableGrid说明:<br>  
     1、暂时不支持表格跨行跨列<br>  
     2、暂时不支持表格冻结列<br>  
     </span>  
     <div id="mainDiv" style="height: 500px;width: 100%;">  
         <div id="theadDiv" style="width:100%;height:16px;overflow-y:scroll;overflow-x:hidden;">  
             <table id="theadTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;">  
                 <thead>  
                     <tr>  
                         <th style="width: 120px;">网站名称</th>  
                         <th style="width: 300px;">网站地址</th>  
                         <th width="50px;">用户名</th>  
                         <th width="50px;">密码</th>  
                         <th width="180px;">邮箱</th>  
                         <th>手机号码</th>  
                         <th>备注</th>  
                         <th>操作</th>  
                     </tr>  
                 </thead>  
             </table>  
         </div>  
         <div id="tbodyDiv" style="width:100%;height:444px;overflow-y:scroll;overflow-x:hidden;background-color: #FAFAFA;" onscroll="togetherScroll(this)">  
             <table id="tbodyTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;border-style: solid;">  
                 <tbody id="content">  
                     <!--   
                         <tr>  
                             <td>Siuon's CSDN Blog</td>  
                             <td><a href="http://blog.csdn.net/xiaochunyong" target="_blank">http://blog.csdn.net/xiaochunyong</a></td>  
                             <td>Siuon</td>  
                             <td>123456</td>  
                             <td>xiaochunyong@gmail.com</td>  
                             <td>1862152####</td>  
                             <td>...</td>  
                             <td><a href="javascript:alert('修改');">修改</a> <a href="javascript:alert('删除');">删除</a></td>  
                         </tr>  
                      -->  
                 </tbody>  
             </table>  
         </div>  
         <div id="tfootDiv" style="width:100%;height:40px;overflow-y:scroll;overflow-x:scroll;" onscroll="togetherScroll(this)">  
             <table id="tfootTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;">  
                 <tfoot>  
                     <tr>  
                         <td> </td>  
                         <td> </td>  
                         <td> </td>  
                         <td style="text-align: right;">第一页 上一页</td>  
                         <td style="text-align: center;align:justify"><input type="text" style="width: auto;"><button type="button">Go</button></td>  
                         <td style="text-align: left;">下一页 最后一页</td>  
                         <td> </td>  
                         <td>1 - 30 共 30 条</td>  
                     </tr>  
                 </tfoot>  
             </table>  
         </div>  
     </div>  
     <script type="text/javascript">  
         //动态生成30行数据,可以把如下代码删除，以便测试无数据时无误。  
         var content = $("#content")[0];  
         for(var i=0;i<30;i++){  
             var row = content.insertRow();  
             row.insertCell().innerHTML = 'Siuon\'s CSDN Blog';  
             row.insertCell().innerHTML = '<a href="http://blog.csdn.net/xiaochunyong" target="_blank">http://blog.csdn.net/xiaochunyong</a>';  
             row.insertCell().innerHTML = 'Siuon';  
             row.insertCell().innerHTML = '123456';  
             row.insertCell().innerHTML = 'xiaochunyong@gmail.com';  
             row.insertCell().innerHTML = '1862152####';  
             row.insertCell().innerHTML = '...';  
             row.insertCell().innerHTML = '<a href="javascript:alert(\'修改\');">修改</a> <a href="javascript:alert(\'删除\');">删除</a>';  
         }  
     </script>  
   </body>  
 </html>  