跨多个表搜索

Question

我在 1 个页面上的 4 个不同表格中显示了体育选秀结果。我有一个搜索栏，可以在表格中搜索人名，然后过滤以仅显示他们出现的行。现在它只会搜索一个表，而不是其他 3 个。我正在尝试搜索在我的整个页面中的任何表格上通用。如果你们中的任何人熟悉它，我正在使用桌锯。

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 为 tableaw 的元素中带有 tr 标记的元素：

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

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

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

确保所有表格都有 class="tablesaw"。

希望对你有帮助。