第一列滚动和表格筛选器功能不同步 [英] First Column Scroll and Table Filter Function not Synchronized
本文介绍了第一列滚动和表格筛选器功能不同步的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经有一段时间没有编码了，而且我对javascript还是比较陌生，所以如果这是一个愚蠢的问题，我们深表歉意.
I haven't coded in a while, and I'm relatively new to javascript, so apologies if this is a dumb question.
基本上，我为HTML表编写了代码，该代码根据第一列中的项目过滤该表，并且允许第一列和表头保持固定，如果表溢出并且您必须滚动
Basically, I wrote code for an HTML table that filters the table based on items in the first column and allows both the first column and header to remain fixed if the Table overflows and you have to scroll.
我遇到的问题是，当您搜索一个项目时，它可以工作并显示出来，但是当您水平滚动时，第一列中的项目将还原为第一列中的第一个项目.因此，例如，如果第一列按降序排列是A，B，C和D，则搜索D然后水平滚动时，A出现在第一列中.
The problem I'm having is that when you search for an item, it works and shows up, but then when you scroll horizontally, the item in the first column reverts to the very first item in the first column. So, for example, if the first column is, in descending order, A, B, C, and D, if you search D and then scroll horizontally, A appears in the first column.
我相当困窘，我们将不胜感激.谢谢！
I'm fairly stuck and any help would be much appreciated. Thank you!
这是我的代码:
$(function() {
$('table').each(function() {
if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
// Clone <thead>
var $w = $(window),
$t = $(this),
$thead = $t.find('thead').clone(),
$col = $t.find('thead, tbody').clone();
$t
.addClass('sticky-enabled')
.css({
margin: 0,
width: '100%'
}).wrap('<div class="sticky-wrap" />');
if ($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');
$t.after('<table class="sticky-thead" />');
if ($t.find('tbody th').length > 0) {
$t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
}
var $stickyHead = $(this).siblings('.sticky-thead'),
$stickyCol = $(this).siblings('.sticky-col'),
$stickyInsct = $(this).siblings('.sticky-intersect'),
$stickyWrap = $(this).parent('.sticky-wrap');
$stickyHead.append($thead);
$stickyCol
.append($col)
.find('thead th:gt(0)').remove()
.end()
.find('tbody td').remove();
$stickyInsct.html('<thead><tr><th>' + $t.find('thead th:first-child').html() + '</th></tr></thead>');
var setWidths = function() {
$t
.find('thead th').each(function(i) {
$stickyHead.find('th').eq(i).width($(this).width());
})
.end()
.find('tr').each(function(i) {
$stickyCol.find('tr').eq(i).height($(this).height());
});
$stickyHead.width($t.width());
$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
},
repositionStickyHead = function() {
var allowance = calcAllowance();
if ($t.height() > $stickyWrap.height()) {
if ($stickyWrap.scrollTop() > 0) {
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $stickyWrap.scrollTop()
});
} else {
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
} else {
if ($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $w.scrollTop() - $t.offset().top
});
} else {
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
}
},
repositionStickyCol = function() {
if ($stickyWrap.scrollLeft() > 0) {
$stickyCol.add($stickyInsct).css({
opacity: 1,
left: $stickyWrap.scrollLeft()
});
} else {
$stickyCol
.css({
opacity: 0
})
.add($stickyInsct).css({
left: 0
});
}
},
calcAllowance = function() {
var a = 0;
$t.find('tbody tr:lt(3)').each(function() {
a += $(this).height();
});
if (a > $w.height() * 0.25) {
a = $w.height() * 0.25;
}
a += $stickyHead.height();
return a;
};
setWidths();
$t.parent('.sticky-wrap').scroll($.throttle(250, function() {
repositionStickyHead();
repositionStickyCol();
}));
$w
.load(setWidths)
.resize($.debounce(250, function() {
setWidths();
repositionStickyHead();
repositionStickyCol();
}))
.scroll($.throttle(250, repositionStickyHead));
}
});
});
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByClassName("headcol")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 10px;
}
body {
font-family: 'Lato', Arial, sans-serif;
color: #3e5682;
background: #f8f8f8;
}
a {
color: #31bc86;
text-decoration: none;
}
a:hover,
a:focus {
color: #8f8888;
}
.container>header {
margin: 0 auto;
padding: 2em;
text-align: center;
background: rgba(0, 0, 0, 0.01);
}
.container>header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
font-weight: 300;
}
.container>header span {
display: block;
font-size: 60%;
opacity: 0.7;
padding: 0 0 0.6em 0.1em;
}
/* To Navigation Style */
.codrops-top {
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
width: 100%;
font-size: 0.69em;
line-height: 2.2;
}
.codrops-top a {
text-decoration: none;
padding: 0 1em;
letter-spacing: 0.1em;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255, 255, 255, 0.95);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.codrops-icon:before {
font-family: 'codropsicons';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
/* Demo Buttons Style */
.codrops-demos {
padding-top: 1em;
font-size: 0.8em;
}
.codrops-demos a {
display: inline-block;
margin: 0.5em;
padding: 0.7em 1.1em;
outline: none;
border: 2px solid #31bc86;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
}
.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
border-color: #7c8d87;
color: #8f8888;
}
.related {
text-align: center;
font-size: 1.5em;
padding-bottom: 3em;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
@font-face {
font-family: 'Blokk';
src: url('../fonts/blokk/BLOKKRegular.eot');
src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.component {
line-height: 1.5em;
margin: 0 auto;
padding: 2em 0 3em;
width: 90%;
max-width: 1000px;
overflow: hidden;
}
.component .filler {
font-family: "Blokk", Arial, sans-serif;
color: #d3d3d3;
}
table {
border-collapse: collapse;
margin-bottom: 3em;
width: 100%;
background: #fff;
}
td,
th {
padding: 0.75em 1.5em;
text-align: left;
}
td.err {
background-color: #e992b9;
color: #3e5682;
font-size: 0.75em;
text-align: center;
line-height: 1;
}
th {
background-color: white;
font-weight: bold;
color: #3e5682;
white-space: nowrap;
}
tbody th {
background-color: white;
}
tbody tr:nth-child(2n-1) {
background-color: #f5f5f5;
transition: all .125s ease-in-out;
}
tbody tr:hover {
background-color: #b8b8b8;
}
/* For appearance */
.sticky-wrap {
overflow-x: auto;
overflow-y: hidden;
position: relative;
margin: 3em 0;
width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .125s ease-in-out;
z-index: 50;
width: auto;
/* Prevent table from stretching to full size */
}
.sticky-wrap .sticky-thead {
box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
z-index: 100;
width: 100%;
/* Force stretch */
}
.sticky-wrap .sticky-intersect {
opacity: 1;
z-index: 150;
}
.sticky-wrap .sticky-intersect th {
background-color: #666;
color: #eee;
}
.sticky-wrap td,
.sticky-wrap th {
box-sizing: border-box;
}
/* Not needed for sticky header/column functionality */
td.user-name {
text-transform: capitalize;
}
.sticky-wrap.overflow-y {
overflow-y: auto;
max-height: 60vh;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<div style="overflow-x:auto;">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Letters.." title="Type in a letter">
<table id="myTable">
<thead>
<tr>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
</tr>
</thead>
<tbody>
<tr>
<th class="headcol">A</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">B</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">C</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">D</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">E</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">F</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">G</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">H</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">I</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">J</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">K</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">L</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">M</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
推荐答案
搜索功能结尾的简单行将解决所有问题:
This simple line on end of your search function will fix everything:
$("table.sticky-col * th.headcol").html(filter);
问题是您的粘性插件或类似的插件会克隆您的原始表并在scrool上制作自己的表:
Problem was that your sticky plugin or what ever it is, clones your original table and makes its own on scrool:
<table class="sticky-col" style="opacity: 1; left: 623px;">...
就像在开发工具中看到的那样，这就是滚动显示的内容，只需将新表作为目标并将第一个th.headcol设置为来自搜索输入的过滤器值，它将满足您的需求.
and that is what is shown on scroll as can been seen in dev tools, by targeting that new table and setting first th.headcol to your filter value from search input it will do what you need.
不是那么简单，它可以显示正确的后者，但是当清空搜索栏时，当它们全部再次滚动显示时，它并没有在所有行中显示正确的后者.因此，需要将其还原.所以你需要这个:
Well it was not that simple, it worked to show correct latter but when search bar was emptied it wasn't showing correct latter in all rows when they were all shown again on scroll. So it needs to be reverted back. So you need this:
if (filter !== "") {
$("table.sticky-col * th.headcol").each(function() {
$(this).parent("tr").css("display", "");
if ($(this).html() !== filter) {
$(this).parent("tr").css("display", "none");
}
});
} else {
$("table.sticky-col * th.headcol").each(function() {
$(this).parent("tr").css("display", "");
});
}
$(function() {
$('table').each(function() {
if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
// Clone <thead>
var $w = $(window),
$t = $(this),
$thead = $t.find('thead').clone(),
$col = $t.find('thead, tbody').clone();
$t
.addClass('sticky-enabled')
.css({
margin: 0,
width: '100%'
}).wrap('<div class="sticky-wrap" />');
if ($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');
$t.after('<table class="sticky-thead" />');
if ($t.find('tbody th').length > 0) {
$t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
}
var $stickyHead = $(this).siblings('.sticky-thead'),
$stickyCol = $(this).siblings('.sticky-col'),
$stickyInsct = $(this).siblings('.sticky-intersect'),
$stickyWrap = $(this).parent('.sticky-wrap');
$stickyHead.append($thead);
$stickyCol
.append($col)
.find('thead th:gt(0)').remove()
.end()
.find('tbody td').remove();
$stickyInsct.html('<thead><tr><th>' + $t.find('thead th:first-child').html() + '</th></tr></thead>');
var setWidths = function() {
$t
.find('thead th').each(function(i) {
$stickyHead.find('th').eq(i).width($(this).width());
})
.end()
.find('tr').each(function(i) {
$stickyCol.find('tr').eq(i).height($(this).height());
});
$stickyHead.width($t.width());
$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
},
repositionStickyHead = function() {
var allowance = calcAllowance();
if ($t.height() > $stickyWrap.height()) {
if ($stickyWrap.scrollTop() > 0) {
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $stickyWrap.scrollTop()
});
} else {
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
} else {
if ($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $w.scrollTop() - $t.offset().top
});
} else {
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
}
},
repositionStickyCol = function() {
if ($stickyWrap.scrollLeft() > 0) {
$stickyCol.add($stickyInsct).css({
opacity: 1,
left: $stickyWrap.scrollLeft()
});
} else {
$stickyCol
.css({
opacity: 0
})
.add($stickyInsct).css({
left: 0
});
}
},
calcAllowance = function() {
var a = 0;
$t.find('tbody tr:lt(3)').each(function() {
a += $(this).height();
});
if (a > $w.height() * 0.25) {
a = $w.height() * 0.25;
}
a += $stickyHead.height();
return a;
};
setWidths();
$t.parent('.sticky-wrap').scroll($.throttle(250, function() {
repositionStickyHead();
repositionStickyCol();
}));
$w
.load(setWidths)
.resize($.debounce(250, function() {
setWidths();
repositionStickyHead();
repositionStickyCol();
}))
.scroll($.throttle(250, repositionStickyHead));
}
});
});
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
//console.log(filter);
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByClassName("headcol")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
if (filter !== "") {
$("table.sticky-col * th.headcol").each(function() {
$(this).parent("tr").css("display", "");
if ($(this).html() !== filter) {
$(this).parent("tr").css("display", "none");
}
});
} else {
$("table.sticky-col * th.headcol").each(function() {
$(this).parent("tr").css("display", "");
});
}
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 10px;
}
body {
font-family: 'Lato', Arial, sans-serif;
color: #3e5682;
background: #f8f8f8;
}
a {
color: #31bc86;
text-decoration: none;
}
a:hover,
a:focus {
color: #8f8888;
}
.container>header {
margin: 0 auto;
padding: 2em;
text-align: center;
background: rgba(0, 0, 0, 0.01);
}
.container>header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
font-weight: 300;
}
.container>header span {
display: block;
font-size: 60%;
opacity: 0.7;
padding: 0 0 0.6em 0.1em;
}
/* To Navigation Style */
.codrops-top {
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
width: 100%;
font-size: 0.69em;
line-height: 2.2;
}
.codrops-top a {
text-decoration: none;
padding: 0 1em;
letter-spacing: 0.1em;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255, 255, 255, 0.95);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.codrops-icon:before {
font-family: 'codropsicons';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
/* Demo Buttons Style */
.codrops-demos {
padding-top: 1em;
font-size: 0.8em;
}
.codrops-demos a {
display: inline-block;
margin: 0.5em;
padding: 0.7em 1.1em;
outline: none;
border: 2px solid #31bc86;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
}
.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
border-color: #7c8d87;
color: #8f8888;
}
.related {
text-align: center;
font-size: 1.5em;
padding-bottom: 3em;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
@font-face {
font-family: 'Blokk';
src: url('../fonts/blokk/BLOKKRegular.eot');
src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.component {
line-height: 1.5em;
margin: 0 auto;
padding: 2em 0 3em;
width: 90%;
max-width: 1000px;
overflow: hidden;
}
.component .filler {
font-family: "Blokk", Arial, sans-serif;
color: #d3d3d3;
}
table {
border-collapse: collapse;
margin-bottom: 3em;
width: 100%;
background: #fff;
}
td,
th {
padding: 0.75em 1.5em;
text-align: left;
}
td.err {
background-color: #e992b9;
color: #3e5682;
font-size: 0.75em;
text-align: center;
line-height: 1;
}
th {
background-color: white;
font-weight: bold;
color: #3e5682;
white-space: nowrap;
}
tbody th {
background-color: white;
}
tbody tr:nth-child(2n-1) {
background-color: #f5f5f5;
transition: all .125s ease-in-out;
}
tbody tr:hover {
background-color: #b8b8b8;
}
/* For appearance */
.sticky-wrap {
overflow-x: auto;
overflow-y: hidden;
position: relative;
margin: 3em 0;
width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .125s ease-in-out;
z-index: 50;
width: auto;
/* Prevent table from stretching to full size */
}
.sticky-wrap .sticky-thead {
box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
z-index: 100;
width: 100%;
/* Force stretch */
}
.sticky-wrap .sticky-intersect {
opacity: 1;
z-index: 150;
}
.sticky-wrap .sticky-intersect th {
background-color: #666;
color: #eee;
}
.sticky-wrap td,
.sticky-wrap th {
box-sizing: border-box;
}
/* Not needed for sticky header/column functionality */
td.user-name {
text-transform: capitalize;
}
.sticky-wrap.overflow-y {
overflow-y: auto;
max-height: 60vh;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<div style="overflow-x:auto;">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Letters.." title="Type in a letter">
<table id="myTable">
<thead>
<tr>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
<th>Something</th>
</tr>
</thead>
<tbody>
<tr>
<th class="headcol">A</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">B</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">C</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">D</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">E</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">F</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">G</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">H</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">I</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">J</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">K</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">L</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th class="headcol">M</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
这篇关于第一列滚动和表格筛选器功能不同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
