javascript - PHP 和 jQuery 实时搜索表格问题

Question

我有一个 JS 文件来实时搜索表格。它工作正常，并在您搜索时在页面上显示结果。

Javascript:

function Search()
{
var $rows = $('#table 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();
});
}

HTML

 <table class="table" id="table">
    <input type="text" id="search" placeholder="Type to search" onkeyup="Search();">
    <tr>
        <th>Naam</th>
        <th>Personeelsnummer</th>
        <th>Geblokkeerd niveau</th>
        <th>Wachtwoord</th>
        <th>Verwijderen</th>
        <th>(De)blokkeren</th>
    </tr>
    <?php
     while ($row = mysqli_fetch_array($result)) {?>
    <tr>
    <td><?php echo $row['P_Naam'];?></td>
    <td><?php echo $row['P_ID'];?></td>
    <td><?php echo $row['P_Blocked'];?></td>

代码继续在表格中添加了一些按钮。

问题是，当它返回搜索时，表标题会消失。我一直试图找出问题所在，但似乎无法弄清楚。

Answer 1

当您选择

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

它还选择这些 header :

<tr>
    <th>Naam</th>
    <th>Personeelsnummer</th>
    <th>Geblokkeerd niveau</th>
    <th>Wachtwoord</th>
    <th>Verwijderen</th>
    <th>(De)blokkeren</th>
</tr>

并删除它们。

尝试更改 jQuery 过滤器以跳过第一行。