0

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

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

4

3 回答 3

0

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

这是您可以使用的版本cfinclude- 仅<cfset dataTblId="">是必需的，但其他一些属性可用。将 HTML 保存在 header <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>
于 2019-09-30T13:30:41.047 回答
0

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

基本上隐藏一个空的 table/tr 外壳，在身体的顶部有固定的位置。创建一个函数来循环遍历数据表的第一行并捕获宽度和内部HTML。在页面加载时调用该函数，使其准备就绪。捕获从屏幕顶部到数据表顶部的距离。当页面滚动超过该点时，切换显示/隐藏表格。还可以在调整窗口大小以重新填充固定表/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 工作，然后它没有。其他人可能有魔法 juju 让这种更简单的方法起作用。

于 2019-09-28T03:24:52.723 回答
0

这里是滚动同步的演示

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>

于 2019-09-28T04:42:39.490 回答