首页猿问第一列滚动和表格过滤功能不同步

第一列滚动和表格过滤功能不同步

JavaScript

慕码人2483693 2022-11-03 10:13:08

我有一段时间没有编码了，而且我对 javascript 还比较陌生，所以如果这是一个愚蠢的问题，我深表歉意。基本上，我为 HTML 表格编写了代码，该表格根据第一列中的项目过滤表格，并允许第一列和标题在表格溢出并且您必须滚动时保持固定。我遇到的问题是，当您搜索一个项目时，它会起作用并显示出来，但是当您水平滚动时，第一列中的项目会恢复为第一列中的第一个项目。因此，例如，如果第一列按降序排列是 A、B、C 和 D，如果您搜索 D 然后水平滚动，A 将出现在第一列中。我相当卡住，任何帮助将不胜感激。谢谢！

查看完整描述

1 回答

潇潇雨雨

TA贡献1833条经验获得超4个赞

搜索功能末尾的这条简单线将解决所有问题：

$("table.sticky-col * th.headcol").html(filter);

问题是您的粘性插件或其他插件会克隆您的原始表格并在 scrool 上创建自己的表格：

<table class="sticky-col" style="opacity: 1; left: 623px;">...

这就是在开发工具中可以看到的滚动显示的内容，通过定位该新表并首先th.headcol从搜索输入中设置您的过滤器值，它将满足您的需求。

编辑：

好吧，它并不是那么简单，它可以显示正确的后者，但是当搜索栏被清空时，当它们在滚动时再次显示时，它并没有在所有行中显示正确的后者。所以需要回滚。所以你需要这个：

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();

.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() {

.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();

}));

.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:

<thead>

<tr>

<th>Something</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

反对回复 2022-11-03

1 回答
0 关注
85 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

第一列滚动和表格过滤功能不同步

第一列滚动和表格过滤功能不同步

1 回答

添加回答