隱藏列時表標題文本消失
[英]Table header text disappears when hiding a column
問題描述
我在包裝紙里有一張桌子。 當用戶滾動時，我需要列標題在頂部是靜態的。 我的那部分工作正常。
其他要求之一是可以顯示或隱藏列，並且標題應進行調整。 這似乎可以解決一個小錯誤：用戶滾動然后單擊“隱藏列”時，標題文本消失。
您可以在這里找到小提琴： http : //jsfiddle.net/joelkinzel/j3RtD/1/
HTML：
<style type="text/css">
body{
padding:0;
margin:0;
}
.tablewrapper {
height: 400px;
margin:0 auto;
overflow: auto;
position: relative;
width: 75%;
}
table {
border-collapse: collapse;
position: relative;
width:100%;
margin: 0 auto;
}
thead {
background-color:#000;
color:#fff;
position: absolute;
text-align: left;
height:1.5em;
top:0;
}
tbody > tr:first-child {
border-top:1.5em solid transparent;
}
</style>
<h1> Floating Table Headers</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu cursus ligula. In non rutrum mauris. Donec aliquet, urna at dignissim scelerisque, nunc libero adipiscing ante, ac luctus mauris est id felis. Nunc vel sagittis arcu. Maecenas quam tortor, congue vestibulum dolor quis, tempor blandit libero. Aenean et magna et massa malesuada auctor. Nunc nec justo quis nisl lobortis mattis. Etiam non ipsum ac quam gravida porta. Sed vitae malesuada magna. Nulla sed urna sed purus sodales vestibulum.</p>
<button class="show-column" type="button">Show Column</button>
<button class="hide-column" type="button">Hide Column</button>
<div class="tablewrapper">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
<td>Uno</td>
<td>Dos</td>
<td>Tres</td>
<td>Quatro</td>
</tr>
<tr>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
<td>Ein</td>
<td>Swei</td>
<td>Drei</td>
<td>Fier</td>
</tr>
</tbody>
</table>
</div>
JavaScript的：
$(function(){
var tableWrapperScollPos = 0;
var tableWrapperOffset = $('.tablewrapper').offset().top;
sizeTableHeader();
$(window).on('resize', function(){
tableWrapperOffset = $('.tablewrapper').offset().top;
sizeTableHeader();
positionTableHeader();
});
$('.tablewrapper').on('scroll', function(){
tableWrapperScollPos = $(this).scrollTop();
sizeTableHeader();
positionTableHeader();
});
function positionTableHeader(){
if (tableWrapperScollPos > 0){
$('thead').css({
'position': 'fixed',
'top': tableWrapperOffset
});
} else {
$('thead').css({
'position': 'absolute',
'top': 0
});
}
}
function sizeTableHeader(){
var columns = $('table tr:first-child > td');
var headers = $('table thead th');
var tableWidth = $('thead').parent().width();
var columnWidths = [];
$.each(columns, function(index){
$(headers[index]).css('width', $(this).width());
});
$('thead').width(tableWidth);
}
$('.show-column').on('click', function(){
$('table td:nth-child(4),table th:nth-child(4)').show();
sizeTableHeader();
});
$('.hide-column').on('click', function(){
$('table td:nth-child(4), table th:nth-child(4)').hide();
sizeTableHeader();
});
});
1 個解決方案
解決方案1
1 已采納 2014-03-14 14:57:04
它可以與我一起工作，在IE中沒有問題，但是chrome有您提到的問題
我試圖在thead中將具有位置：絕對的類添加到tr中，並且可以正常工作
.head {
position: absolute;
}
並將其添加到thead中的tr
<thead>
<tr class="head">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
這是一個演示
使用 Javascript 函數搜索 HTML 表格時，表格標題消失
[英]Table header disappears when searching through the HTML table with Javascript function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.