JavaScript表格tr行左右拖動效果
分享一段程式碼例項，它實現了table表格部分單元格固定，其他單元格可以滾動的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ padding:0; margin:0; } body{ font-size:12px; font-family:"微軟雅黑"; } .list{ width:100%; position:relative; } .list table{ border-collapse:collapse; } .list table th, .list table td{ border:1px solid #000; padding:5px 15px; text-align:center; background:#fff; white-space:nowrap; } .table-left{ position:absolute; top:0; left:0 } .table-right{ overflow-x:auto; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function() { var List = document.getElementById("list"); var Listl = document.getElementById("table-left"); var Listr = document.getElementById("table-right"); var wList = (List.innerWidth || (List.clientWidth)); var wListl = (Listl.innerWidth || (Listl.clientWidth)); Listr.style.paddingLeft = (wListl - 1) + "px"; $(window).resize(function() { var List = document.getElementById("list"); var Listl = document.getElementById("table-left"); var Listr = document.getElementById("table-right"); var wList = (List.innerWidth || (List.clientWidth)); var wListl = (Listl.innerWidth || (Listl.clientWidth)); Listr.style.paddingLeft = (wListl - 1) + "px"; }); }); </script> </head> <body> <div class="list" id="list"> <div class="table-box"> <div class="table-left" id="table-left"> <table cellpadding="0" cellspacing="0"> <tr> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> </tr> </table> </div> <div class="table-right" id="table-right"> <table cellpadding="0" cellspacing="0"> <tr> <th>滾動標題開始開始</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> <th>標題</th> </tr> <tr> <td>滾動內容開始開始</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> </tr> <tr> <td>滾動內容開始開始</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> </tr> <tr> <td>滾動內容開始開始</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> <th>內容</th> </tr> </table> </div> </div> </div> </body> </html>
上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。
原理非常簡單，看起來是一個表格，其實是兩個表格組合而成，然後再通過js進行相關設定。
一.程式碼註釋:
（1）.$(document).ready(function() {})，當文件結構完全載入完畢再去執行函式中的程式碼。
（2）.var List = document.getElementById("list")，獲取id屬性值為list的元素物件。
（3）.var Listl = document.getElementById("table-left")，獲取id屬性值為table-left的元素物件。
（4）.var Listr = document.getElementById("table-right")，獲取id屬性值為table-right元素物件。
（5）.var wList = (List.innerWidth || (List.clientWidth))，獲取元素客戶區的寬度，採用了相容性寫法。
（6）.Listr.style.paddingLeft = (wListl - 1) + "px"，設定右側表格的padding-left屬性值;wListl是左側table容器div元素的所佔據的寬度值；之所以減1是為了遮擋住右側table表格的左側邊框，這樣看起來就是一個表格了。
二.相關閱讀:
（1）.document.getElementById參閱document.getElementById()一章節。
（2）.resize事件參閱jQuery resize事件一章節。
相關文章
- JavaScript 方向鍵切換表格tr行高亮效果JavaScript
- JavaScript當前tr行高亮效果JavaScript
- 表格tr行的展開和摺疊效果
- JavaScript 限定範圍拖動效果JavaScript
- table表格tr行點選高亮
- JavaScript 表格隔行變色效果JavaScript
- JavaScript動態建立表格和增加表格的行JavaScript
- JavaScript實用的表格行滑鼠點選高亮效果JavaScript
- jQuery拖動調整左右兩列寬度jQuery
- JavaScript動態為table表格新增行JavaScript
- flutter上拉抽屜效果，flutter拖動抽屜效果Flutter
- JavaScript 拖動調整元素尺寸JavaScript
- jQuery滑動方式上下左右滾動效果jQuery
- 自定義實現MIUI的拖動視差效果（阻尼效果）UI
- JavaScript拖動調整元素的尺寸JavaScript
- JavaScript滑鼠拖動調整div大小JavaScript
- JavaScript拖動滑鼠繪製矩形方框JavaScript
- JavaScript動態建立table表格JavaScript
- Qt實現遮罩效果並可以拖動伸縮QT遮罩
- JavaScript元素抖動效果JavaScript
- 微信小程式實現卡片左右滑動效果微信小程式
- vxe-table v4.8+ 實現行拖動排序，列拖動排序排序
- 點選最後一行表格行自增效果
- JavaScript 視窗抖動效果JavaScript
- JavaScript 簡單動畫效果JavaScript動畫
- JavaScript table表格行進行刪除和新增JavaScript
- JavaScript | JavaScript刪除表格除標題行(第一行)的所有行JavaScript
- javascript對點選事件和拖動事件的區分JavaScript事件
- JavaScript簡單的動畫效果JavaScript動畫
- vue2.0和better-scroll實現左右聯動效果Vue
- CSS 細線表格效果CSS
- CSS細線表格效果CSS
- JavaScript 點選表格行實現背景變色JavaScript
- IDEA小技巧：Debug拖動跳轉任意行Idea
- JavaScript左右滑動切換的選項卡詳解JavaScript
- elementui 當表格有固定列，拖動條在固定列的範圍內時拖拽不動UI
- angular 拖動功能Angular
- (精華)2020年7月18日 vue element-ui實現表格拖動排序VueUI排序