Çoklu Tablolarda Arama

Question

1 sayfada tek bir sayfada 4 farklı tabloda spor taslak sonuçları var. Tablodaki kişilerin isimlerini arayan bir arama çubuğum var ve yalnızca görüntülendikleri satırı görüntüleyecek şekilde filtreleyecek. Şu anda yalnızca bir tabloyu arayacak ve diğer tarafa değil 3. arama yapmaya çalışıyorum Tüm sayfamdaki tüm tablolarda evrensel olarak çalışır. Herhangi birine aşina iseniz, tablesaw kullanıyorum.

HTML Tablo Başlangıç:

<input type="text" id="search" placeholder="Search for Player"> 
<table class="tablesaw" id="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-minimap> 
<thead> 
<tr> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Round Value</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">1st</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">2nd</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">3rd</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">4th</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="6">5th</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="7">6th</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="8">7th</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="9">8th</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="10">9th</th> 
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="11">10th</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
       <td class="title">Round 1</td> 
       <td width="130"> Mike Trout</td> 
       <td width="134"> Giancarlo Stanton</td> 
       <td width="148"> Andrew McCutchen</td> 
       <td width="151"> Paul Goldschmidt</td> 
       <td width="128"> Clayton Kershaw</td> 
       <td width="126">Jose Abreu</td> 
       <td width="122"> Adam Jones</td> 
       <td width="142"> Anthony Rizzo</td> 
       <td width="127"> Miguel Cabrera</td> 
       <td width="137"> Yasiel Puig</td> 
</tr> 

Ve komut dosyası:

var $rows = $('#tablesaw tr'); 

Kimlikleri şunlardır:

<script> 
var $rows = $('#tablesaw tr'); 
$('#search').keyup(function() { 
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', 
    reg = RegExp(val, 'i'), 
    text; 

$rows.show().filter(function() { 
    text = $(this).text().replace(/\s+/g, ' '); 
    return !reg.test(text); 
}).hide(); 
}); 
</script> 

Answer 1

CSS'niz seçici kimliği tablesaw sahip bir öğenin içinde tr etiketleriyle unsurları maçları benzersiz; Aynı kimliği birden çok öğeye verirseniz, ilk dışındaki tüm kimlikler geçersizdir. Seçiciniz sadece birinciyle eşleşecektir. Birden tablolardaki unsurları ile eşleşme istiyorsanız, böyle bir sınıfadı yerine bir kimliği, bir şey kullanmalısınız:

var $rows = $('.tablesaw tr'); 

tüm tabloları class = "tablesaw" olduğundan emin olun.

Umarım bu yardımcı olur.