0

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

搜索功能的工作方式如下：我正在遍历表行，并且我“.hide()”所有与关键字条件不匹配的行。但是现在，由于表格行 indezes 保持不变，我的导航搞砸了。

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

$(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 表格标记非常简单。只是一个带有 table、thead、tr、th、tbody、tr 和 td 的普通表格标记。没什么特别的。

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

此致

4

1 回答 1

0

我找到了解决方案。

在“refreshFocused();”中选择当前行时，由于“:visible”过滤器出现问题

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

于 2018-10-02T12:57:21.333 回答