首頁猿問第一列滾動(dòng)和表格過濾功能不同步

第一列滾動(dòng)和表格過濾功能不同步

JavaScript

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

我有一段時(shí)間沒有編碼了，而且我對 javascript 還比較陌生，所以如果這是一個(gè)愚蠢的問題，我深表歉意?；旧?，我為 HTML 表格編寫了代碼，該表格根據(jù)第一列中的項(xiàng)目過濾表格，并允許第一列和標(biāo)題在表格溢出并且您必須滾動(dòng)時(shí)保持固定。我遇到的問題是，當(dāng)您搜索一個(gè)項(xiàng)目時(shí)，它會(huì)起作用并顯示出來，但是當(dāng)您水平滾動(dòng)時(shí)，第一列中的項(xiàng)目會(huì)恢復(fù)為第一列中的第一個(gè)項(xiàng)目。因此，例如，如果第一列按降序排列是 A、B、C 和 D，如果您搜索 D 然后水平滾動(dòng)，A 將出現(xiàn)在第一列中。我相當(dāng)卡住，任何幫助將不勝感激。謝謝！

查看完整描述

1 回答

瀟瀟雨雨

TA貢獻(xiàn)1833條經(jīng)驗(yàn) 獲得超4個(gè)贊

搜索功能末尾的這條簡單線將解決所有問題：

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

問題是您的粘性插件或其他插件會(huì)克隆您的原始表格并在 scrool 上創(chuàng)建自己的表格：

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

這就是在開發(fā)工具中可以看到的滾動(dòng)顯示的內(nèi)容，通過定位該新表并首先th.headcol從搜索輸入中設(shè)置您的過濾器值，它將滿足您的需求。

編輯：

好吧，它并不是那么簡單，它可以顯示正確的后者，但是當(dāng)搜索欄被清空時(shí)，當(dāng)它們在滾動(dòng)時(shí)再次顯示時(shí)，它并沒有在所有行中顯示正確的后者。所以需要回滾。所以你需要這個(gè)：

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:

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

反對回復(fù) 2022-11-03

1 回答
0 關(guān)注
105 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

第一列滾動(dòng)和表格過濾功能不同步

第一列滾動(dòng)和表格過濾功能不同步

1 回答

添加回答