table的滾動和行定位效果
阿新 • • 發佈：2017-09-10
spa 偏移量 滾動條位置 offset utf-8 ebe pre 橫向滾動 開始
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{ 12width: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的滾動和行定位效果