table的滚动和行定位效果
Posted 你七啊？
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table的滚动和行定位效果相关的知识，希望对你有一定的参考价值。
tabel的表头信息固定 而内容滚动；实现：当div的内容超过样式设置的width 、height时会出现相应的横向、纵向滚动条。利用这个让table的内容超过规定值时，自动出现滚动条。
而设置两个table;一个为表头信息、一个为内容。内容用一个div,包起来。连个table对齐即可。
定位效果：scrollTop()可以获取设设置当前滚动条距离顶层的高度，offset()获取匹配元素到当前窗口的相对位移，而top顾名思义；而最终得到元素到当前窗口的高度相对偏移量;
offset()根据当前行显示的位置而变，并不是固定的。
行定位的核心代码：scrollTo.offset().top - tab.offset().top + tab.scrollTop()
//思路:定位行高度量-顶部高度量 +当前滚动条位置高度
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>测试</title> 6 7 <script src="../js/jquery-1.7.2.min.js"></script> 8 9 <style type="text/css"> 10 11 #tables{ 12 width:800px; 13 height: 400px; 14 } 15 16 #tablehead{ 17 width: 100%; 18 height: 60px; 19 border: 1px solid black; 20 } 21 22 #tableContent{ 23 width:100%; 24 height:300px; 25 overflow-x:hidden;/*隐藏横向滚动条*/ 26 overflow-y:auto; 27 border:1px solid black; 28 29 } 30 31 table{ 32 width: 100%; 33 text-align:center; 34 } 35 td{ 36 font-family: ‘楷体‘; 37 border:1px solid #e7ebef; 38 } 39 40 </style> 41 </head> 42 <body> 43 44 <div id="tables"> 45 <div id="tablehead"> 46 <table id="tabhead"> 47 <tr> 48 <td style="width:8%;height:60px;">序号</td> 49 <td style="width:67%;height:60px;">xx</td> 50 <td style="width:25%;height:60px;">xx</td> 51 </tr> 52 </table> 53 </div> 54 <div id="tableContent"> 55 <table id="tabledata"> 56 <tr> 57 <td style="width:8%;height:60px;">1</td> 58 <td style="width:67%;height:60px;">xx</td> 59 <td style="width:25%;height:60px;">xx</td> 60 </tr> 61 <tr> 62 <td style="width:8%;height:60px;">2</td> 63 <td style="width:67%;height:60px;">xx</td> 64 <td style="width:25%;height:60px;">xx</td> 65 </tr> 66 <tr> 67 <td style="width:8%;height:60px;">3</td> 68 <td style="width:67%;height:60px;">xx</td> 69 <td style="width:25%;height:60px;">xx</td> 70 </tr> 71 <tr> 72 <td style="width:8%;height:60px;">4</td> 73 <td style="width:67%;height:60px;">xx</td> 74 <td style="width:25%;height:60px;">xx</td> 75 </tr> 76 <tr> 77 <td style="width:8%;height:60px;">5</td> 78 <td style="width:67%;height:60px;">xx</td> 79 <td style="width:25%;height:60px;">xx</td> 80 </tr> 81 <tr> 82 <td style="width:8%;height:60px;">6</td> 83 <td style="width:67%;height:60px;">xx</td> 84 <td style="width:25%;height:60px;">xx</td> 85 </tr> 86 <tr> 87 <td style="width:8%;height:60px;">7</td> 88 <td style="width:67%;height:60px;">xx</td> 89 <td style="width:25%;height:60px;">xx</td> 90 </tr> 91 </table> 92 </div> 93 94 </div> 95 96 <button onclick="scollerLocation(2)">第3行</button> 97 <button onclick="scollerLocation(1)">第2行</button> 98 <button onclick="scollerLocation(3)">第4行</button> 99 <button onclick="scollerLocation(5)">第6行</button> 100 <!-- 索引从0开始所以 第2行索引为1 以此类推--> 101 <script type="text/javascript"> 102 103 //楼层定位显示 104 function scollerLocation(Nfloor){ 105 106 // alert(Nfloor); 107 var tab = $(‘#tableContent‘); //具有滚动条的div 108 var scrollTo = tab.find("tr").eq(Nfloor); //获取指定行的元素 思路定位行高度量-顶部高度量 +当前滚动条位置高度 109 110 111 tab.scrollTop( 112 scrollTo.offset().top - tab.offset().top + tab.scrollTop() 113 ); 114 115 116 } 117 118 119 120 </script> 121 </body> 122 </html>
以上是关于table的滚动和行定位效果的主要内容，如果未能解决你的问题，请参考以下文章
如何让table 表头随着滚动条滚动？ 达到覆盖效果。 JS 、JQ大神求帮忙。
让table表头固定，tr超出指定条数后无缝上下循环滚动jquery效果代码