个人中心
gpt4 book ai didi

javascript - 即使表格切换为不可见，粘性标题也会出现在滚动上

转载 作者：行者123 更新时间：2023-12-02 18:57:17 31 4
gpt4 key购买 nike

我是一名菜鸟程序员，对表格有一些问题，该表格最终将成为网站的一部分，该网站将包括其他图形以及表格。为了避免潜在的视觉困惑，我希望用户能够打开或关闭该表(该表显示来自此处名为“testdatastickyheadersissue.csv”的外部 CSV 文件的数据)。当表格打开时，用户应该能够对表格进行排序，并在向下滚动页面时看到粘性标题。下面的代码使用了 tablesorter 插件及其几个小部件，非常适合所有这些功能，除了当关闭表格时粘性标题不会与表格的其余部分一起禁用，因此粘性标题仍然显示向下滚动页面时，即使表格的其余部分不可见。当表格关闭时如何隐藏粘性标题？我确信可能有一个简单的解决方案，但我很困惑并且希望得到任何帮助。谢谢!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <meta http-equiv="expires" content="0"> 
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Thu, 14 Feb 2013 20:13:32 GMT">
<meta name="description" content="">
<meta name="keywords" content="">

<title>Test</title>

<style type="text/css">

 a {
   font-family:arial;
background-color: #FFFFFF;
margin:10px 0pt 15px;
font-size: 10pt;
width: 100%;
text-align: left;
position:absolute;
top:1px;
left:1px}

/* CSS from 'style.css' - tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
position:absolute;
top:25px;
left:1px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}

table.tablesorter thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
background-color: #3182BD;
}

table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}

table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(asc.gif);
background-color: #9ECAE1;
}

table.tablesorter td.primary,
table.tablesorter tr.odd td.primary {
background-color: #99b3e6;
}
table.tablesorter tr.even td.primary {
background-color: #c2d1f0;
}

table.tablesorter td.secondary,
table.tablesorter tr.odd td.secondary {
background-color: #c2d1f0;
}
table.tablesorter tr.even td.secondary {
background-color: #d6e0f5;
}

table.tablesorter td.tertiary,
table.tablesorter tr.odd td.tertiary {
background-color: #d6e0f5;
}
table.tablesorter tr.even td.tertiary {
background-color: #ebf0fa;
}

/*table tr:hover {
background: #fff;
color: #ccc;
}*/


/*table tr:nth-child(even) {
background: #f0f8ff;
}

table th {
  background: #9ECAE1;
  }

table {
  border-width:0px;
  border-style:solid;
  border-color:black;
  position:absolute;
  top:5px;
  left:5px;
}*/

</style>

</head>

<body>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="jquery.csvToTable.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.widgets.js"></script>
<table id="CSVTable" class="tablesorter" style="display: none; visibility: hidden;">   </table>
<script>

$('#CSVTable').CSVToTable('testdatastickyheadersissue.csv', {
loadingImage: 'loading.gif', 
startLine: 1,
headers: ['id', 'name', 'pop11']
}).bind("loadComplete",function() { 
$(document).find('#CSVTable').tablesorter({
    headerTemplate : '{content}{icon}',
    widgets : ['zebra', 'stickyHeaders', 'columns'], // include the widgets
    widgetOptions : {
    stickyHeaders : 'tablesorter-stickyHeader',
  // change the default column class names
  // primary is the first column sorted, secondary is the second, etc
  columns : ['primary', 'secondary', 'tertiary']
  // include thead when adding class names
  /*columns_thead : true,
  // include tfoot when adding class names
  columns_tfoot : true*/
}

});
});

function toggle() {
var ele = document.getElementById("CSVTable");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "Show data table for counties";
}
else {
    ele.style.display = "block";
    text.innerHTML = "Hide data table for counties";
}
} 

function toggleVisibility() {
 document.getElementById("CSVTable").style.display = "";
 if(document.getElementById("CSVTable").style.visibility == "hidden" ) {
 document.getElementById("CSVTable").style.visibility = "visible";
 }
 else {
 document.getElementById("CSVTable").style.visibility = "hidden";
 }
} 

</script>  
<a href="javascript:toggleVisibility();">Click here to display/hide data table for counties.</a>
</body>
</html>

外部测试 CSV 文件的内容:

id,name,pop11
1,A,1000
2,B,2000
3,C,3000
4,D,4000
5,E,5000
6,F,6000
7,G,7000
8,H,8000
9,I,9000
10,J,10000
11,K,11000
12,L,12000
13,M,13000
14,N,14000
15,O,15000
16,P,16000
17,Q,17000
18,R,18000
19,S,19000
20,T,20000
21,U,21000
22,V,22000
23,W,23000
24,X,24000
25,Y,25000
26,Z,26000
27,AA,27000
28,BB,28000
29,CC,29000
30,DD,30000
31,EE,31000
32,FF,32000
33,GG,33000
34,HH,34000
35,II,35000
36,JJ,36000
37,KK,37000
38,LL,38000
39,MM,39000
40,NN,40000
41,OO,41000
42,PP,42000
43,QQ,43000
44,RR,44000
45,SS,45000
46,TT,46000
47,UU,47000
48,VV,48000
49,WW,49000
50,XX,50000
51,YY,51000
52,ZZ,52000
53,AAA,53000
54,BBB,54000
55,CCC,55000
56,DDD,56000
57,EEE,57000
58,FFF,58000
59,GGG,59000
60,HHH,60000
61,III,61000
62,JJJ,62000
63,KKK,63000
64,LLL,64000
65,MMM,65000
66,NNN,66000
67,OOO,67000
68,PPP,68000
69,QQQ,69000
70,RRR,70000
71,SSS,71000
72,TTT,72000
73,UUU,73000
74,VVV,74000
75,WWW,75000
76,XXX,76000
77,YYY,77000
78,ZZZ,78000

最佳答案

我似乎无法重复您所描述的问题... demo )

实际上，使用 visibilty: hide 隐藏表格会导致这种情况，但看起来表格是通过 display: none 和 visibility: hide 隐藏的.

由于您使用的是 tablesorter(一个 jQuery 插件)，我将修改您用于隐藏表格的代码以使用 jQuery:

HTML

<a href="#" class="toggle">Click here to display/hide data table for counties.</a>

脚本

jQuery(function($){
  $('.toggle').click(function(){
    var isHidden = $('#CSVTable').toggle().is(':hidden');
    $('#displayText').html( (isHidden ? 'Show' : 'Hide') + ' data table for counties');
    return false;
  });
});

关于javascript - 即使表格切换为不可见，粘性标题也会出现在滚动上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15207111/

31 4 0
文章推荐： javascript - 延迟被调用函数中的 JavaScript 代码执行
文章推荐： vue.js - 此消息类型不允许使用参数 : nonce
文章推荐： pandas: df.loc[-1,col] 有时工作，有时用 NAN 添加额外的行
文章推荐： javascript - 如何让一段 JavaScript 代码先于另一段代码运行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com