带有标题冻结但可以不使用任何其他jquery插件的可滚动表行？

Question

如何在不使用任何其他jQuery插件的情况下使用冻结标头创建简单的可滚动表格行？

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

Answer 1

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

基本上隐藏在主体顶部具有固定位置的空表/ tr外壳。创建一个函数以遍历数据表的第一行并捕获width和innerHTML。在pageload上调用该函数，使其准备就绪。捕获从屏幕顶部到数据表顶部的距离。当页面滚动到该点时，切换显示/隐藏表格。在调整窗口大小以重新填充固定表/ 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>

我从许多人那里借来了关于如何捕获滚动和窗口大小调整的信息。我最初只给固定表/ tr填充一次，然后应用大小即可，但是Chrome可以工作，但后来却没有。其他人可能会想到魔术般的法宝来使这种简单的方法起作用。

Answer 2

这里是滚动同步的演示

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>

Answer 3

ColdFusion模板在顶部显示/隐藏并调整大小调整

以下是您可以cfinclude进行的版本-仅需要<cfset dataTblId="">，但还有一些其他属性可用。将HTML保存在标题<th>中。

<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>