table 固定列和行的实现

来源：互联网发布：大数据的4v特征是编辑：程序博客网时间：2024/06/07 18:23

处理思路：
复制出一个和原始表一样的table(只保留需要固定的列或行), 覆盖到原始表上对应的行或列上，滚动时进行位置调整处理，使其始终保持固定位置不变

难点：复制出的行或列的高度和宽度要和原始表保持一致，当原始表指定固定宽高时比较简单，复制出的行列宽高保持一致即可，否则复制出的表样式要和原始表相同.

使用方法：
1. 主调用方法入口：

  <body onload="showFix(true,false,initTableId);">

2. 复制原始表的行或列，这个自己复制吧，div名称统一命名，示例如下

<pre name="code" class="html">  <!-- 复制的固定头两列 -->  <div id="fixedColumnDiv" align="center" style="width:100px;position:Fixed;display:none;">   <table id='columnTable' id='fixedColumn'>    <tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr>   </table>  </div>  <!-- 复制的固定头一行 -->  <div id="fixedRowDiv" align="center" style="height:auto;position:Fixed;display:none;">   <table>    <tr bgcolor="blue" id='fixedRow'><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>    </tr>  </table> </div>

完整代码：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style type="text/css">    body{   margin:0px;}table{width:auto;margin:0px;font:Georgia 11px;color:#333333;text-align:center;border-collapse:collapse; }table td{border:1px solid #f00;width:100px;height:30px;padding:15px;}  </style> <script>  var initLeft;var initTop; var isFixColumn = false;var isFixRow = false;/** * added by 王伟 20160612 * param: *    isFixC: 是否固定列 true/false *    isFixR: 是否固定行 true/false *    initTableId： 原始表ID */function showFix(isFixC,isFixR,initTableId){  //是否显示固定列或者固定行    isFixColumn = isFixC;    isFixRow = isFixR;if(checkScrollBar('h')){         document.getElementById("fixedColumnDiv").style.display="block";    }if(checkScrollBar('y')){         document.getElementById("fixedRowDiv").style.display="block";    }//获取原始表的具体位置var initTable = document.getElementById(initTableId);    initLeft = getPosition(initTable,'left');    initTop = getPosition(initTable,'top'); //如果div和table 之间有margin，则减去响应数值        if(checkScrollBar('h')){var fixedColumnDiv = document.getElementById("fixedColumnDiv");fixedColumnDiv.style.position='absolute'; fixedColumnDiv.style.left = initLeft;fixedColumnDiv.style.top = initTop; }         if(checkScrollBar('y')){var fixedRowDiv = document.getElementById("fixedRowDiv");fixedRowDiv.style.position='absolute'; fixedRowDiv.style.left = initLeft;fixedRowDiv.style.top = initTop; }}/** * 滚动时重新设置div层的位置  */window.onscroll = function(){    if(checkScrollBar('h')){    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;      var fixedColumnDiv = document.getElementById("fixedColumnDiv");      fixedColumnDiv.style.position='absolute';      fixedColumnDiv.style.left = (initLeft+scrollLeft)+'px';      fixedColumnDiv.style.top = initTop+'px';  }  if(checkScrollBar('y')){   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;      var fixedRowDiv = document.getElementById("fixedRowDiv");      fixedRowDiv.style.position='absolute';      fixedRowDiv.style.left = initLeft+'px';      fixedRowDiv.style.top = (initTop+scrollTop)+'px';  }}  /** * 获取元素的位置偏移量信息 * param: *    left:获取左偏移量 *    top: 获取上偏移量 */    function getPosition(obj,type){         var topValue= 0,leftValue= 0;        while(obj){             leftValue+= obj.offsetLeft;           topValue+= obj.offsetTop;            obj= obj.offsetParent;           }           finalvalue = leftValue + "," + topValue;        if(type == 'left'){            return   leftValue;        }else if(type == 'top'){            return topValue;        }else {            return 0;        }    } /** * 获取是否有滚动条 * param： h: 判断是否有横向滚动条，y：判断是否有竖向滚动条 * return：boolean， true：有，false：无 */    function checkScrollBar(type){ //判断是否有滚动条，有滚动条才显示固定列层var visuals = getPageSize('visual');var reals = getPageSize('real');if(type == 'h' && isFixColumn){if(document.body.style.overflow!="hidden"&& document.body.scroll!="no"&& reals[1] > visuals[1]){ return true;}else{  return false;} }if(type == 'y' && isFixRow){if(document.body.style.overflow!="hidden"&& document.body.scroll!="no"&& reals[0] > visuals[0]){ return true;}else{  return false;} }    return false;}    /** * 浏览器兼容的获取网页实际内容大小 * param: type 获取大小类型（visual或real） * 参数值说明： visual： 获取网页课件区域高宽，real：网页内容真实宽高 */function getPageSize(type) {     //检测浏览器的渲染模式     var body = (document.compatMode&&document.compatMode.toLowerCase() == "css1compat")?document.documentElement:document.body;var bodyOffsetWidth = 0;var bodyOffsetHeight = 0;var bodyScrollWidth = 0;var bodyScrollHeight = 0;var pageDimensions = [0, 0];pageDimensions[0] = body.clientHeight;pageDimensions[1] = body.clientWidth;if(type == 'visual'){   return pageDimensions;}bodyOffsetWidth = body.offsetWidth;bodyOffsetHeight = body.offsetHeight;bodyScrollWidth = body.scrollWidth;bodyScrollHeight = body.scrollHeight;if (bodyOffsetHeight > pageDimensions[0]) {pageDimensions[0] = bodyOffsetHeight;}if (bodyOffsetWidth > pageDimensions[1]) {pageDimensions[1] = bodyOffsetWidth;}if (bodyScrollHeight > pageDimensions[0]) {pageDimensions[0] = bodyScrollHeight;}if (bodyScrollWidth > pageDimensions[1]) {pageDimensions[1] = bodyScrollWidth;}return pageDimensions;}  </script> </head> <body onload="showFix(true,false,'initTable');">  <table id="initTable">  <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>  <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>  <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>  <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>  <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>  <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>  <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>   <tr><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>  </tr>   </table>  <!-- 复制的固定头两列 -->  <div id="fixedColumnDiv" align="center" style="width:100px;position:Fixed;display:none;">   <table>    <tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr><tr bgcolor="red"><td>111</td><td>222</td></tr>   </table>  </div>  <!-- 复制的固定头一行 -->  <div id="fixedRowDiv" align="center" style="height:auto;position:Fixed;display:none;">   <table>    <tr bgcolor="blue"><td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td><td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td><td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>    </tr>  </table>  </div> </body></html>

0 0