JQuery 表搜索过滤器副作用:由于行插入而导致导航混乱

Question

我目前正在开发一个表格视图来可视化和更改仓库库存。要求如下：可排序、可搜索和按侧边按钮导航(快速向上、向上、向下、快速向下(。所以我实现了这个表并用数据填充了它。 排序和搜索本身工作正常，但是当涉及到使用活动搜索关键字的导航时，控件就搞砸了。

搜索功能的工作原理如下：我正在迭代表格行，我".hide(("所有与关键字条件不匹配的行。但是现在，由于表格行保持不变，我的导航被搞砸了。

编辑：这是我的搜索功能和导航按钮的小提琴，以便更好地理解：

$(document).ready(function (e) {
var currPos = 0;
refreshFocused(); 
$('.table-articles-row').click(function() {
currPos = $(this).index();
refreshFocused();
});
$('#btn-fast-up').click(function() {
		var firstVisible = $('.table-articles-row:visible:first');
		currPos = $(firstVisible).index();
		refreshFocused();
});  
$('#btn-up').click(function() {
var above = $('.active').closest('.table-articles-row').prevAll('.table-articles-row:visible').first();
currPos = $(above).index();
refreshFocused();
});   
$('#btn-down').click(function() {
var beneath = $('.active').closest('.table-articles-row').nextAll('.table-articles-row:visible').first();
currPos = $(beneath).index();
refreshFocused();
}); 
$('#btn-fast-down').click(function() {
		var lastVisible = $('.table-articles-row:visible:last');
		currPos = $(lastVisible).index();
		refreshFocused();
});
$("#btn-search").click(function () {
var value = $("#ed-search").val();
		$(".table-articles-row").filter(function () {
		  $(this).toggle($(this).text().toLowerCase().indexOf(value.toLowerCase()) > -1);
		});
		currPos = 0;
		refreshFocused();
	});
function refreshFocused() {
$('.table-articles-row').removeClass('active');
var focusedRow = $('.table-articles-row:visible').eq(currPos);
focusedRow.addClass('active');
$(focusedRow)[0].scrollIntoView({
					behavior: "smooth", 
					block: "center" 
		});
}
});

* {
font-family: 'Calibri';
}
html, body {
overflow: hidden;
background: lightgray;
}
.table-wrapper {
width: 50vh;
margin: 20vh auto;
height: 40vh;
background: lightgray;
}
.table-content {
width: 40vh;
height: 30vh;
float: left;
background: lightgreen;
overflow: hidden;
}
.table {
width: 40vh;
}
.table thead th {
position: sticky;
	top: 0;
	background: rgba(255,255,255,1) !important;
	padding: 0;
height: 7.5vh;
border: 1px solid lightgreen;
}
.table tbody td {
background: rgba(79,129,12,0.5) !important;
padding: 0;
height: 2.5vh;
}
.table-controls {
width: 10vh;
height: 30vh;
float: left;
}
.table-nav-btn {
width:10vh;
height: 7.5vh;
background: #fff;
border: 1px solid lightgreen;
font-weight: bold;
}
.table-search {
width: 50vh;
height: 10vh;
float: left;
background: #fff;
border: 1px solid lightgreen;
border-radius: 5px/5px;
text-align: center;
}
.search-text-input,
.search-confirm-btn {
width: 100%;
height: 5vh;
text-align: center;
}
.search-confirm-btn {
background: lightgreen;
border: none;
}
.active {
background: rgba(79,129,12,0.8) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
<div class="table-content">
<table class="table">
<thead>
<tr class="table-head-row">
<th class="table-head-col">Beschreibung</th>
<th class="table-head-col">Anzahl</th>
<th class="table-head-col">Maßeinheit</th>
<th class="table-head-col">Preis</th>
</tr>
</thead>
<tbody>
<tr class="table-articles-row">
<td class="table-articles-col">Beer</td>
<td class="table-articles-col">2,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,90</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Ice cream</td>
<td class="table-articles-col">4,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">1,30</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Golden Toast</td>
<td class="table-articles-col">6,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,60</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Fit Toast</td>
<td class="table-articles-col">4,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,79</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Root beer</td>
<td class="table-articles-col">10,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">3,50</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Snack Sausage</td>
<td class="table-articles-col">5,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">3,90</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Bacon</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">2,20</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Coca Cola 0,25l</td>
<td class="table-articles-col">24,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,30</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Fanta 0,25L</td>
<td class="table-articles-col">21,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,30</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Sprite 0,25L</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,30</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Hawaii Toast Set</td>
<td class="table-articles-col">8,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">10,89</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Root Beer Plus</td>
<td class="table-articles-col">4,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">4,20</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Snack Cheese Stick</td>
<td class="table-articles-col">9,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">0,90</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">McKenzy Fries</td>
<td class="table-articles-col">2,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">3,40</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Jalapenos</td>
<td class="table-articles-col">17,00</td>
<td class="table-articles-col">Jar.</td>
<td class="table-articles-col">4,70</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Ketchup</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,35</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Mustard</td>
<td class="table-articles-col">7,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,35</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Pizza</td>
<td class="table-articles-col">19,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">2,79</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Playing cards</td>
<td class="table-articles-col">3,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">5,80</td>  
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Marlboro 27 pc.</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">8,00</td>  
</tr>
</tbody>
</table>
</div>
<div class="table-controls">
<button id="btn-fast-up" class="table-nav-btn">Fast up</button>
<button id="btn-up" class="table-nav-btn">Up</button>
<button id="btn-down" class="table-nav-btn">Down</button>
<button id="btn-fast-down" class="table-nav-btn">Fast Down</button>
</div>
<div class="table-search">
<input id="ed-search" type="search" class="search-text-input" placeholder="Search ..."/> 
<input id="btn-search" type="button" class="search-confirm-btn" value="Apply search"/>
</div>
</div>

html 表标记非常简单。只是一个普通的表格标记，包括表格、头、tr、th、tbody、tr 和 td。没什么特别的。

有没有人知道如何正确"忽略"不可见的项目，或者重新开发导航按钮以确保即使在搜索处于活动状态时也能正确导航行？

此致敬意

Answer 1

我已经找到了解决方案。

出现此问题的原因是在"刷新聚焦((;"中选择当前行时出现"：visible"筛选器

.eq 似乎隐藏元素有问题。