JavaScript表格tr行左右拖動效果

admin發表於2018-11-20

分享一段程式碼例項，它實現了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左右拖動滑動的按鈕效果
2017-04-17
JavaScript
JavaScript 方向鍵切換表格tr行高亮效果
2019-01-09
JavaScript
JavaScript當前tr行高亮效果
2018-07-08
JavaScript
js拖動實現左右圖片對比效果
2017-04-15
JS
JavaScript 限定範圍拖動效果
2018-11-21
JavaScript
javascript div元素滑鼠拖動效果詳解
2017-04-07
JavaScript
使用jQuery控制table表格的tr行顯示和隱藏效果
2017-03-28
jQuery
javascript 動態新增表格行
2010-03-24
JavaScript
jQuery table表格tr行顯示隱藏
2017-03-28
jQuery
JavaScript動態建立表格和增加表格的行
2018-04-08
JavaScript
jQuery拖動調整左右兩列寬度
2018-11-24
jQuery
JavaScript 表格隔行變色效果
2019-01-18
JavaScript
JavaScript實用的表格行滑鼠點選高亮效果
2021-09-09
JavaScript
JavaScript動態為table表格新增行
2018-06-02
JavaScript
jquery div層拖動效果封裝
2017-04-09
jQuery封裝
CSS3矩形左右擺動效果
2017-02-27
CSSS3
jQuery滑動方式上下左右滾動效果
2018-07-09
jQuery
flutter上拉抽屜效果，flutter拖動抽屜效果
2020-07-06
Flutter
JavaScript 拖動調整元素尺寸
2019-01-31
JavaScript
JavaScript拖動div元素詳解
2017-10-30
JavaScript
jQuerydiv元素拖動效果程式碼例項
2017-04-04
jQuery
表格拖動滾動條標題固定程式碼例項
2017-03-03
移動端觸屏拖動頁面滾動效果
2017-02-22
JavaScript拖動調整元素的尺寸
2018-11-30
JavaScript
JavaScript拖動滑鼠繪製矩形方框
2018-05-31
JavaScript
JavaScript滑鼠拖動調整div大小
2018-05-22
JavaScript
JavaScript有虛線框的拖動
2017-04-16
JavaScript
js滑鼠拖動立方體3D運動效果
2017-04-16
JS3D
移動端div塊拖動效果程式碼例項
2017-02-23
微信小程式實現卡片左右滑動效果
2019-04-30
微信小程式
jQuery table表格奇偶行變色效果
2017-03-14
jQuery
JavaScript 動態建立table表格
2018-02-13
JavaScript
JavaScript動態建立table表格
2018-03-12
JavaScript
JavaScript抖動效果
2017-03-15
JavaScript
拖動滾動條實現內容自動載入效果
2017-04-03
拖動滾動條實現側欄導航定位效果
2017-10-31
Qt實現遮罩效果並可以拖動伸縮
2024-04-16
QT遮罩
Android左右滑動效果的程式碼實現
2015-03-13
Android

JavaScript表格tr行左右拖動效果

相關文章