文章/答案/技术大牛

发布

社区首页 >问答首页 >使用标题freeze但不使用任何其他jquery插件的可滚动表行？

问使用标题freeze但不使用任何其他jquery插件的可滚动表行？
EN

Stack Overflow用户

提问于 2012-09-20 02:20:12

回答 3查看 303关注 0票数 0

如何在不使用任何额外的jQuery插件的情况下创建一个简单的带有冻结标题的可滚动表行？

我找到了一些使用jQuery插件的解决方案，比如fixedheadertable，chromatable等等，但我只想使用jQuery中的“纯”库。

jquery

scrollable

回答 3

Stack Overflow用户

发布于 2019-09-28 11:24:53

在屏幕顶部显示/隐藏标题行-仅限jQ

基本上隐藏一个空的桌子/tr外壳，在主体的顶部有固定的位置。创建一个函数来遍历数据表的第一行，并捕获宽度和innerHTML。在页面加载上调用该函数，这样它就准备好了。捕获从屏幕顶部到数据表顶部的距离。当页面滚动经过该点时，切换显示/隐藏表格。还可以在调整窗口大小以重新填充固定表时捕获/tr shell...

<script type="text/javascript">
var distance = 0, $window = $(window);
function resizeHdr(){
    $("#tblHoldHdr").css("width", $("#tblData").css("width"));
    var oTr=$("#trHoldHdr").html("");//short var for frozen header row
    $("#tblData tr:first").find("th").each(function(i){//loop through header to mimic
        oTr.append('<th style="width:'+$(this).css("width")+' !important">'+$(this).html()+'</th>');//copy content with forced width
    });
}
$(function(){
    distance=$('#tblData').offset().top;
    $("#tblHoldHdr").css({"margin-left":$("body").css("margin"),"margin-top":-parseInt($("body").css("margin"))+"px"});//position frozen hder
    resizeHdr();
});
$(window).scroll(function(){
    $("#tblHoldHdr").css("left", -$(this).scrollLeft());//frozen hdr pos fixed doesn't move w/ scrolling so this keeps it lined up (w/o "-" header slides twice as fast out to the right)
    if($window.scrollTop() >= distance){
        $("#tblHoldHdr").css("display","");// Hdr has reached the top
    }else{
        $("#tblHoldHdr").css("display","none");// Hdr below top
    }
});
$(window).resize(function(){
    resizeHdr();
});
</script>
<!-- At the top goes this is the frozen header table - populated by jQ on doc.ready() -->

<table style="display:none;position:fixed;" id="tblHoldHdr">
    <tr id="trHoldHdr"></tr>
</table>
…other html code…
<!-- This is the data output table wherever you need it on the page -->
<table id="tblData"><thead>
    <tr><th> Col 1</th><th>Col 2</th></tr>
    <tr><td> Data 1/1</td><td>Data 1/2</td></tr>
    <tr><td> Data 2/1</td><td>Data 2/2</td></tr>
</table>

我从不同的人那里学到了如何捕捉滚动和调整窗口大小。我最初只填充了一次固定的table/tr，然后应用了大小，但是Chrome起作用了，然后它就不起作用了，其他人可能有魔力让这个更简单的方法起作用。

票数 0

Stack Overflow用户

发布于 2019-09-28 12:42:39

下面是滚动同步的演示

https://jsfiddle.net/RaviMakwana/28fgaut5/

var div1 = document.getElementById("scrollDiv1");
var div2 = document.getElementById("scrollDiv2");
div2.addEventListener("scroll", function(){  
   div1.scrollLeft = this.scrollLeft;
})

<div id="scrollDiv1" style="height: 100px;overflow:hidden;">
   <div style="width:1000px;">
    Test 1 321321 131 313 1321 33 13
   </div>
</div>

<div id="scrollDiv2" style="height: 100px;overflow:scroll;">
   <div style="width:1000px;">
    Test 2 23232
   </div>
</div>

票数 0

Stack Overflow用户

发布于 2019-09-30 21:30:41

ColdFusion模板在顶部显示/隐藏和调整大小修复

这是一个你可以cfinclude的版本--只有<cfset dataTblId="">是必需的，但也有一些其他的属性可用。保存标题<th>%s中的超文本标记语言。

<CFIF isDefined("variables.dataTblId") and !findNoCase("Mozilla/4.0", cgi.http_user_agent) and !findNoCase("compatible", cgi.http_user_agent)>
<cfparam name="variables.hdrTblHtmlAttr" default=""><!--- for old HTML attributes of the data table (e.g., cellspacing, cellpadding, align, etc.) --->
<cfif len(variables.hdrTblHtmlAttr)><!--- inserted table is defined inside single quotes, must have doublequote attribute values --->
    <cfset variables.hdrTblHtmlAttr=replace(variables.hdrTblHtmlAttr, "'", '"', "all")>
</cfif>
<cfparam name="variables.hdrTrClass" default="">
<cfparam name="variables.hdrTrStyle" default="">
<cfparam name="variables.hdrTdClass" default="">
<cfparam name="variables.hdrTdStyle" default="">
<cfparam name="variables.dirOfJq" default="/js/"><!--- should be relative, but /js should be in place --->
<cfparam name="variables.jQFile" default="jquery-3.2.1.min.js"><!--- in case new version is implemented (expect this code should still work but?....) --->
<cfoutput>
<script type="text/javascript" src="#variables.dirOfJq##variables.jQFile#"></script>
<script type="text/javascript">
var distance = 0, $window = $(window);
function resizeHdr(){
    $("##tblHoldHdr").css("width", $("###variables.dataTblId#").css("width"));
    var oTr=$("##trHoldHdr").html("");//short var for frozen header row, cleared out
    $("###variables.dataTblId# tr:first").find("th").each(function(i){//loop through header to mimic
        oTr.append('<th style="width:'+$(this).css("width")+' !important">'+$(this).html()+'</th>');//copy content with forced width
    });
}
$(function(){
    $("body").prepend(<!--- stuff frozen header table html into the page just inside/at top of <body> --->
    '<table class="'+$("###variables.dataTblId#").attr("class")+'" style="display:none;position:fixed;background-color:white;'+$("###variables.dataTblId#").attr("style")+'" id="tblHoldHdr" #variables.hdrTblHtmlAttr#>'+
        '<tr id="trHoldHdr" class="#variables.hdrTrClass#" style="#variables.hdrTrStyle#"></tr></table>'
    )
    distance=$('###variables.dataTblId#').offset().top;
    $("##tblHoldHdr").css({"margin-left":$("body").css("margin"),"margin-top":-parseInt($("body").css("margin"))+"px"});//position frozen hder
    resizeHdr();//populate for scroll w/o resize
});
</cfoutput>
$(window).scroll(function(){
    $("#tblHoldHdr").css("left", -$(this).scrollLeft());//frozen hdr pos fixed doesn't move w/ scrolling so this keeps it lined up (w/o "-" header slides twice as fast out to the right) 
    if($window.scrollTop() >= distance){
        $("#tblHoldHdr").css("display","");// Hdr has reached the top
    }else{
        $("#tblHoldHdr").css("display","none");// Hdr below top
    }
});
$(window).resize(function(){
    resizeHdr();
});
</script>
</CFIF>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12500592

复制

相似问题

问使用标题freeze但不使用任何其他jquery插件的可滚动表行？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用标题freeze但不使用任何其他jquery插件的可滚动表行？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用标题freeze但不使用任何其他jquery插件的可滚动表行？
EN