JQuery表一列固定是指當用戶滾動表格時,其中一列始終保持固定不動,使用戶可以隨時查看重要的數據列而無需水平滾動。實現這種效果并不難,只需要結合 JQuery 和 CSS 即可。
首先在表格的 CSS 文件中添加以下樣式:
thead th:first-child { position: fixed; left: 0px; width: 200px; } tbody td:first-child { position: fixed; left: 0px; width: 200px; }
這里給定的是表頭的樣式和表格體的樣式,通過設置 position 為 fixed,將其固定在頁面上。 left 設置為 0,width 設置為 200px,就可以把第一列固定住了。
接下來,借助 JQuery 的 scroll 方法來捕獲滾動事件,實現懸浮列的效果。代碼如下:
$(document).ready(function(){ $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); $('thead th:first-child').css('top',scrollTop); $('tbody td:first-child').css('top',scrollTop+40); }); });
這里使用了 $(document).ready 方法確保頁面加載完畢再執行代碼,$(window).scroll 方法綁定了滾動事件。當滾動條滾動時,scrollTop 捕獲當前的滾動高度,將其設置為相應元素的 top 屬性值即可。
通過以上代碼,我們就可以實現表格一列固定的效果了。當然,如果你使用了一些列寬不同的元素,還需要根據列的不同寬度來計算相應的 left 值。
上一篇div img右