jquery - JQuery テーブル検索フィルターの副作用: 行インデズによるナビゲーションの混乱

Question

現在、倉庫在庫を視覚化および変更するためのテーブルビューを開発しています。要件は次のとおりです。並べ替え可能、検索可能、およびサイドボタンによるナビゲーション (早送り、早送り、早送り、早送り)。そこで、テーブルを実装してデータを入力しました。並べ替えと検索自体は問題なく機能しますが、アクティブな検索キーワードを使用したナビゲーションになると、コントロールが台無しになります。

検索機能は次のように機能します。テーブルの行を繰り返し処理し、キーワード条件に一致しないすべての行を「.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 を使用した通常のテーブルマークアップです。特にない。

検索がアクティブな場合でも、非表示のアイテムを適切に「無視」する方法や、ナビゲーションボタンを再開発して行の正しいナビゲーションを確保する方法を知っている人はいますか?

よろしくお願いします

score 0 · Accepted Answer

私は解決策を見つけました。

この問題は、「refreshFocused();」で現在の行を選択するときに「:visible」フィルターが原因で発生しました。

.eq は隠し要素に問題があるようです。

jquery - JQuery テーブル検索フィルターの副作用: 行インデズによるナビゲーションの混乱

1 に答える 1

Related

Reference