跨多个表进行搜索

Question

我有体育选秀结果，在4个不同的表，在1页。我有一个搜索栏，它搜索表中的人的名字，并筛选为只显示他们出现在其中的行。现在，它将只在一个表上搜索，而不是在另一个表中搜索。我试图让搜索在我整个页面中的任何一个表上都能普遍使用。如果你们中的任何人对此熟悉的话，我正在使用表。

HTML表开始：

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

我的剧本是：

<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选择器将元素与具有id表的元素中的tr标记匹配：

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

id是唯一的；如果将相同的id给多个元素，则除第一个以外的所有id都无效。您的选择器将只匹配第一个。如果要匹配多个表中的元素，则应该使用类名而不是id，如下所示：

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

确保您的所有表都有class="tablesaw“。

我希望这能帮上忙。