테이블이 보이지 않게 전환 되더라도 스크롤에 끈적한 헤더가 표시됩니다.

저는 테이블과 함께 다른 그래픽을 포함 할 테이블에 일부 문제가있는 신참 프로그래머입니다. 시각적 인 혼란을 피하기 위해 사용자가 테이블 (여기서는 "testdatastickyheadersissue.csv"라는 외부 CSV 파일의 데이터를 표시)을 켜거나 끌 수있게하고 싶습니다. 테이블이 토글되면 사용자는 페이지를 스크롤 할 때 테이블을 정렬하고 스티커 헤더를 볼 수 있어야합니다. tablesorter 플러그인과 위젯 중 일부를 사용하는 아래의 코드는 테이블이 꺼져있을 때 스티커 헤더가 나머지 테이블과 함께 사용 중지되지 않는 경우를 제외하고는 이러한 모든 기능에 적합합니다. 따라서 스티커 헤더가 계속 표시됩니다. 테이블의 나머지 부분이 보이지 않을 때에도 페이지를 아래로 스크롤 할 때. 테이블을 끈 상태에서 끈적한 헤더를 숨기려면 어떻게해야합니까? 아마 이것에 대한 간단한 수정이있을 것이라고 확신하지만, 나는 곤란을 겪었고 어떤 도움을 주셔서 감사합니다. 감사! 외부 테스트 CSV 파일의테이블이 보이지 않게 전환 되더라도 스크롤에 끈적한 헤더가 표시됩니다.

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

내용 :

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

출처

2013-03-04 user2072931

내가 겪고있는 문제의 다음은 [스크린 샷] (http://i1299.photobucket.com/albums/ag70/geomapper123/ToggleTableStickyHeadersIssue_zps2be89c94.png)입니다. – user2072931

난 당신이 설명하고있는 문제를 복제 할 수없는 것 ... demo) 사실

사용하여 테이블을 숨기기 visiblilty: hidden이 발생하지만 표가 display: none 및 visibility: hidden으로 숨겨져있는 것 같습니다.

HTML

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

스크립트

: 당신이 tablesorter에하는 jQuery 플러그인을 사용하고 있기 때문에

, 나는 당신이 jQuery를 사용하여 테이블을 숨기기 위해 사용하는 코드를 수정거야

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

출처

2013-03-05 05:37:32 Mottie

제안 된 코드, @Mottie을 가져 주셔서 감사합니다. 위의 스크린 샷에 대한 링크를 추가하여 적어도 내 컴퓨터에서 어떤 일이 일어나고 있는지 확인할 수 있습니다. 도움에 감사드립니다! – user2072931

스크린 샷이별로 알려주지 않는데,이 데모가 훨씬 도움이 될 것입니다. 위의 코드가 문제를 해결 했습니까? – Mottie

지금까지 @Mottie, 나는 당신의 코드에 성공하지 못했다. 그러나 그것은 나의 이해 부족 때문일 것이다. 노력을 계속하고 데모를 만들 수 있는지 확인합니다. 도와 주셔서 다시 한 번 감사드립니다! – user2072931

테이블이 보이지 않게 전환 되더라도 스크롤에 끈적한 헤더가 표시됩니다.

답변

관련 문제