色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery表 一列固定

宋博文1年前6瀏覽0評論

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右