javascript - 当没有行与搜索输入匹配时，如何隐藏表的 <thead> 元素？

javascript - 当没有行与搜索输入匹配时，如何隐藏表的元素？ - Javascript

转载作者：行者123 更新时间：2023-11-28 19:11:57

我有一张表，其中包含正式员工、试用员工和受训人员的列表。搜索栏正在运行并突出显示匹配的人员姓名。我想要发生的是删除 <thead>未在其下找到结果时的表格元素。

Here's the sample output

另外，我想要 <thead>如果用户没有在搜索栏中输入任何内容，元素及其下方的元素将再次显示。与此输出不同:

I don't want this happening on the table

我真的希望我可以在我的 Javascript 函数中添加一些东西，这样我的代码就不会改变太多。

这是我的数据库“multi_login”的数据库结构:

multi_login database structure

HTML:


    <div class="col-sm-12" style="margin-bottom:0;padding-bottom: 0;">
          <table class="table-borderless text-center" style="width:90%; height:10%; margin:0 auto; padding:0;">
            <tr>
                        <td style="width:25%;">
                        </td>
                        <td style="width:50%;">
                            <div class="nj_searchbar">
                                <i class="material-icons" style="color:#cc0000;font-weight: bold;">search</i>
                                <input type="text" id="search-personnel" onkeyup="searchPerson()" placeholder="Who are you looking for?" >
                                <i class="material-icons clear" style="display: none;color:#cc0000;font-weight: bold;">clear</i>
                                <div id="resultFound">...</div>

                            </div>
                        </td>
                        <td style="width:50%;">
                            <button href="#" title="Add Personnel" id="add" class="add-btn-dark btn" style="float:right;" data-toggle="modal" data-target="#editPersonModal"><i class="material-icons icon_dark">group_add</i>&nbsp;Add New Personnel</button>
                        </td>
            </tr>
          </table>


        </div>
<div class="col-sm-12">
            <!-- <button href="#" title="Add Personnel" id="add" class="add-btn-dark btn btn-outline-dark" style="float:right;margin-right:5%;margin-bottom:1%;" data-toggle="modal" data-target="#editPersonModal"><i class="material-icons icon_dark">group_add</i>&nbsp;Add New Personnel</button> -->
            <table class="table table-hover table-bordered text-center personTable" id="personnelTable" style="width:90%; margin:0 auto;padding:0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius:50px;">
             <thead class="employeeList">
                    <tr>
                        <th class="theader" style="color:white;">Employee Name</th>
                        <th class="theader" style="color:white;">Date of Birth</th>
                        <th class="theader" style="color:white;">TIN</th>
                        <th class="theader" style="color:white;">SSS Number</th>
                        <th class="theader" style="color:white;">PhilHealth Number</th>
                        <th class="theader" style="color:white;">Pag-IBIG MID No./RTN</th>
                        <th class="theader" style="color:white;">ACTIONS</th>
                    </tr>
             </thead>
                <?php display_employee(); ?>
             <thead class="probList">   
                    <tr>
                        <th class="theader" style="color:white;">Probationary Name</th>
                        <th class="theader" style="color:white;">Date of Birth</th>
                        <th class="theader" style="color:white;">TIN</th>
                        <th class="theader" style="color:white;">SSS Number</th>
                        <th class="theader" style="color:white;">PhilHealth Number</th>
                        <th class="theader" style="color:white;">Pag-IBIG MID No./RTN</th>
                        <th class="theader" style="color:white;">ACTIONS</th>
                    </tr>
            </thead>
                <?php display_probationary(); ?>
                <thead class="trainList">
                    <tr>
                        <th class="theader" style="color:white;">Trainee Name</th>
                        <th class="theader" style="color:white;">Date of Birth</th>
                        <th class="theader" style="color:white;">TIN</th>
                        <th class="theader" style="color:white;">SSS Number</th>
                        <th class="theader" style="color:white;">PhilHealth Number</th>
                        <th class="theader" style="color:white;">Pag-IBIG MID No./RTN</th>
                        <th class="theader" style="color:white;">ACTIONS</th>
                    </tr>
                </thead>
                <?php display_trainee(); ?>
            </table> 
        </div>

CSS:

.table tr td
{
    font-size:15px;
    vertical-align: middle;

}

.personTable td:hover
{
    color:#cc0000;
    font-weight: 500;
}

/*background color of headers in table*/
.theader
{
    background-color: black;
}

PHP:函数.php

// connect to database
$userhost = 'root';
$userPass = '';
$dataBase = 'multi_login';
$host = 'localhost';
$db = mysqli_connect('localhost', 'root', '', $dataBase);


function display_employee()
{
    global $db;
    $query = "SELECT * FROM employees WHERE emp_type='Regular' AND emp_status='Active'";
    $result = mysqli_query($db, $query);

    echo "<tbody>";
    while($row = mysqli_fetch_array($result))
    {
        $empMname = $row['emp_mname'];
        $empbdate = $row['emp_bdate'];
        // to display Month and Day only
        $newdate = date('F d', strtotime($empbdate)); 

        // to hide the first 6 numbers for TIN Number
        $empTin = $row['emp_tin'];
        if ($empTin !='')
        {
            $empTin = substr_replace($empTin, "xxxxxx" , 0, 6);
            $newtin = sprintf("%s-%s-%s",
                      substr($empTin, 0,3),
                      substr($empTin, 3,3),
                      substr($empTin, 6));
        }
            else if ($empTin =='')
            {
                $newtin = '';
            }
        // to hide the first 7 numbers for SSS Number
        $empSss = $row['emp_sss'];
        if ($empSss !='')
        {
            $empSss = substr_replace($empSss, "xxxxxxx" , 0, 7);
            $newsss = sprintf("%s-%s-%s",
                      substr($empSss, 0,2),
                      substr($empSss, 2,7),
                      substr($empSss, 9));
        }
            else if ($empSss =='')
            {
                $newsss = '';
            }
        // to hide the first 9 numbers for PHILHEALTH Number
        $empPhealth = $row['emp_phealth'];
        if ($empPhealth !='')
        {
            $empPhealth = substr_replace($empPhealth, "xxxxxxxxx" , 0, 9);
            $newphealth = sprintf("%s-%s-%s",
                      substr($empPhealth, 0,2),
                      substr($empPhealth, 2,9),
                      substr($empPhealth, 11));
        }
            else if ($empPhealth =='')
            {
                $newphealth = '';
            }
        // to hide the first 10 numbers for PAGIBIG Number
        $empPagibig = $row['emp_pagibig'];
        if ($empPagibig !='')
        {
            $empPagibig = substr_replace($empPagibig, "xxxxxxxxxx" , 0, 10);
            $newpagibig = sprintf("%s-%s-%s",
                      substr($empPagibig, 0,4),
                      substr($empPagibig, 4,4),
                      substr($empPagibig, 8));
        }
            else if ($empPagibig =='')
            {
                $newpagibig = '';
            }
        //Get the first letter of Middle Name and insert a dot
        if($empMname != '')
        {
            $newMname = substr($empMname, 0,1).".";
        }//if no Middle name, it will only be blank
        else if($empMname == '')
        {
            $newMname = "";
        }



        echo "<tr><td>" . $row['emp_lname'] . ", " . $row['emp_fname'] . " " . $newMname . "</td><td>" . $newdate . "</td><td>" . $newtin . "</td><td>" . $newsss . "</td><td>" . $newphealth . "</td><td>" . $newpagibig . "</td>
            <td>
                <button id=\"$row[emp_id]\" class='btn  btn-sm edit_data' data-toggle='modal' data-target='#editPersonModal' title='Edit' name='Edit'><i class='material-icons mIcon' alt='Edit'>edit</i></button>&nbsp;
                <button id=\"$row[emp_id]\" class='btn btn-sm  delete_data' data-toggle='modal' data-target='#deleteModal' title='Delete' name='Delete'><i class='material-icons mIcon' alt='Delete'>delete</i></button>
            </td>
        </tr>";
    }
    echo "</tbody>";
}

function display_probationary()
{
    global $db;
    $query = "SELECT * FROM employees WHERE emp_type='Probationary' AND emp_status='Active'";
    $result = mysqli_query($db, $query);

    echo "<tr>";
    while($row = mysqli_fetch_array($result))
    {
        $empMname = $row['emp_mname'];
        $empbdate = $row['emp_bdate'];
        // to display Month and Day only
        $newdate = date('F d', strtotime($empbdate)); 
        // to hide the first 6 numbers for TIN Number
        $empTin = $row['emp_tin'];
        if ($empTin !='')
        {
            $empTin = substr_replace($empTin, "xxxxxx" , 0, 6);
            $newtin = sprintf("%s-%s-%s",
                      substr($empTin, 0,3),
                      substr($empTin, 3,3),
                      substr($empTin, 6));
        }
            else if ($empTin =='')
            {
                $newtin = '';
            }
        // to hide the first 7 numbers for SSS Number
        $empSss = $row['emp_sss'];
        if ($empSss !='')
        {
            $empSss = substr_replace($empSss, "xxxxxxx" , 0, 7);
            $newsss = sprintf("%s-%s-%s",
                      substr($empSss, 0,2),
                      substr($empSss, 2,7),
                      substr($empSss, 9));
        }
            else if ($empSss =='')
            {
                $newsss = '';
            }
        // to hide the first 9 numbers for PHILHEALTH Number
        $empPhealth = $row['emp_phealth'];
        if ($empPhealth !='')
        {
            $empPhealth = substr_replace($empPhealth, "xxxxxxxxx" , 0, 9);
            $newphealth = sprintf("%s-%s-%s",
                      substr($empPhealth, 0,2),
                      substr($empPhealth, 2,9),
                      substr($empPhealth, 11));
        }
            else if ($empPhealth =='')
            {
                $newphealth = '';
            }
        // to hide the first 10 numbers for PAGIBIG Number
        $empPagibig = $row['emp_pagibig'];
        if ($empPagibig !='')
        {
            $empPagibig = substr_replace($empPagibig, "xxxxxxxxxx" , 0, 10);
            $newpagibig = sprintf("%s-%s-%s",
                      substr($empPagibig, 0,4),
                      substr($empPagibig, 4,4),
                      substr($empPagibig, 8));
        }
            else if ($empPagibig =='')
            {
                $newpagibig = '';
            }
        //Get the first letter of Middle Name and insert a dot
        if($empMname != '')
        {
            $newMname = substr($empMname, 0,1).".";
        }//if no Middle name, it will only be blank
        else if($empMname == '')
        {
            $newMname = "";
        }

        echo "<tr><td>" . $row['emp_lname'] . ", " . $row['emp_fname'] . " " . $newMname . "</td><td>" . $newdate . "</td><td>" . $newtin . "</td><td>" . $newsss . "</td><td>" . $newphealth . "</td><td>" . $newpagibig . "</td>
        <td>
                <button id=\"$row[emp_id]\" class='btn btn-sm edit_data' data-toggle='modal' data-target='#editPersonModal' title='Edit' name='Edit'><i class='material-icons mIcon' alt='Edit'>edit</i></button>&nbsp;
                <button id=\"$row[emp_id]\" class='btn btn-sm delete_data' data-toggle='modal' data-target='#deleteModal' title='Delete' name='Delete'><i class='material-icons mIcon' alt='Delete'>delete</i></button>
        </td>
        </tr>";
    }
    echo "</tr>";
}

function display_trainee()
{
    global $db;
    $query = "SELECT * FROM employees WHERE emp_type='Trainee' AND emp_status='Active'";
    $result = mysqli_query($db, $query);

    echo "<tr>";
    while($row = mysqli_fetch_array($result))
    {
        $empMname = $row['emp_mname'];
        $empbdate = $row['emp_bdate'];
        // to display Month and Day only
        $newdate = date('F d', strtotime($empbdate)); 
        // to hide the first 6 numbers for TIN Number
        $empTin = $row['emp_tin'];
        if ($empTin !='')
        {
            $empTin = substr_replace($empTin, "xxxxxx" , 0, 6);
            $newtin = sprintf("%s-%s-%s",
                      substr($empTin, 0,3),
                      substr($empTin, 3,3),
                      substr($empTin, 6));
        }
            else if ($empTin =='')
            {
                $newtin = '';
            }
        // to hide the first 7 numbers for SSS Number
        $empSss = $row['emp_sss'];
        if ($empSss !='')
        {
            $empSss = substr_replace($empSss, "xxxxxxx" , 0, 7);
            $newsss = sprintf("%s-%s-%s",
                      substr($empSss, 0,2),
                      substr($empSss, 2,7),
                      substr($empSss, 9));
        }
            else if ($empSss =='')
            {
                $newsss = '';
            }
        // to hide the first 9 numbers for PHILHEALTH Number
        $empPhealth = $row['emp_phealth'];
        if ($empPhealth !='')
        {
            $empPhealth = substr_replace($empPhealth, "xxxxxxxxx" , 0, 9);
            $newphealth = sprintf("%s-%s-%s",
                      substr($empPhealth, 0,2),
                      substr($empPhealth, 2,9),
                      substr($empPhealth, 11));
        }
            else if ($empPhealth =='')
            {
                $newphealth = '';
            }
        // to hide the first 10 numbers for PAGIBIG Number
        $empPagibig = $row['emp_pagibig'];
        if ($empPagibig !='')
        {
            $empPagibig = substr_replace($empPagibig, "xxxxxxxxxx" , 0, 10);
            $newpagibig = sprintf("%s-%s-%s",
                      substr($empPagibig, 0,4),
                      substr($empPagibig, 4,4),
                      substr($empPagibig, 8));
        }
            else if ($empPagibig =='')
            {
                $newpagibig = '';
            }
        //Get the first letter of Middle Name and insert a dot
        if($empMname != '')
        {
            $newMname = substr($empMname, 0,1).".";
        }//if no Middle name, it will only be blank
        else if($empMname == '')
        {
            $newMname = "";
        }

        echo "<tr><td>" . $row['emp_lname'] . ", " . $row['emp_fname'] . " " . $newMname . "</td><td>" . $newdate . "</td><td>" . $newtin . "</td><td>" . $newsss . "</td><td>" . $newphealth . "</td><td>" . $newpagibig . "</td>
        <td>
                <button id=\"$row[emp_id]\" class='btn btn-sm edit_data' data-toggle='modal' data-target='#editPersonModal' title='Edit' name='Edit'><i class='material-icons mIcon' alt='Edit'>edit</i></button>&nbsp;
                <button id=\"$row[emp_id]\" class='btn btn-sm delete_data' data-toggle='modal' data-target='#deleteModal' title='Delete' name='Delete'><i class='material-icons mIcon' alt='Delete'>delete</i></button>
        </td>
        </tr>";
    }
    echo "</tr>";
}

Javascript:

// function to search personnel on table
        function searchPerson() {

             // Declare variables
              var input, filter, table, tr, td, i, txtValue, index, countResult;
              input = document.getElementById("search-personnel");
              filter = input.value.toUpperCase();
              table = document.getElementById("personnelTable");
              tr = table.getElementsByTagName("tr");
              countResult = 0;

              // Loop through all table rows, and hide those who don't match the search query
              for (i = 0; i < tr.length; i++) 
              {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) 
                {
                  txtValue = td.textContent || td.innerText;

                  // first clear any previously marked text
                  // this strips out the <mark> tags leaving text (actually all tags)
                  td.innerHTML = txtValue;

                  index = txtValue.toUpperCase().indexOf(filter);
                  if (index > -1) 
                  {

                    // using substring with index and filter.length 
                    // nest the matched string inside a <mark> tag
                    td.innerHTML = txtValue.substring(0, index) + "<span class='highlight'>" + txtValue.substring(index, index + filter.length) + "</span>" + txtValue.substring(index + filter.length);

                    tr[i].style.display = "";

                    if(input.value != "")
                    {
                        countResult++;
                    }
                    else if(input.value == "")
                    {
                        countResult = -1;
                    }


                  } 
                  else 
                  {
                    tr[i].style.display = "none";

                  }
                }



              } // end of for loop for table rows


                if(countResult > 1)
                {
                     document.getElementById("resultFound").innerHTML = "<span class='nj_have'>" + countResult + " Results Found.. </span>";
                }
                else if(countResult == 1)
                {
                     document.getElementById("resultFound").innerHTML = "<span class='nj_have'>" + countResult + " Result Found.. <span>";
                }
                else if(countResult == 0)
                {
                     document.getElementById("resultFound").innerHTML = "<span class='nj_havent'>PERSONNEL NOT FOUND! Try again...</span>";
                }
                else if(input.value == "" && countResult < 0)
                {
                     document.getElementById("resultFound").innerHTML = "<span>...</span>";
                }

        }

最佳答案

我将使用 jQuery，但如果需要，您也可以使用纯 javascript。

首先，当搜索为空时:

$('.personnelTable').find('thead').removeClass('no-results');

然后，在遍历 tr 之前，您将属性 data-has-results 添加到每个 thead，默认值为0:

$('.personnelTable').find('thead').attr('data-has-results', 0);

然后，对于每个匹配搜索词的tr:

$(tr[i]).closest('thead').attr('data-has-results', 1);

然后，在循环之后，隐藏没有结果的thead:

$('.personnelTable').find('thead').each(function () {
    if ($(this).attr('data-has-results') == 0) {
      $(this).addClass('no-results');
    } else {
      $(this).removeClass('no-results');
    }
});

还有 CSS:

thead.no-results {
    display: none;
}

关于javascript - 当没有行与搜索输入匹配时，如何隐藏表的 <thead> 元素？ - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59099842/

文章推荐： javascript 文本编辑器 - 如何捕获选择

文章推荐： ios - 如何从 AppDelegate 更新某些 ViewController 的标签？

linux - 我的文件中有 10 行。现在我需要打印前 3 行，然后打印第 5-7 行，然后打印第 9-10 行。 LINUX 的命令是什么？
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件最佳答案您可以在文件读取循环中设置一个计数器并打印它，计数=0 读取行时做让我们数一数++ if
python - 查找2个文件中的公共(public)行，从文件1写入公共(public)行，从文件2写入非公共(public)行
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在，我想写入文件 2 中的行，否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
mysql - 从第一个表中选择 1 行，然后从其他表中选择 n 行，然后返回到第一个表并选择第 2 行，依此类推
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
sql - 哪个最快，1x 插入 512 行，4x 插入 128 行，或 512x 插入 1 行
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
Mysql 选择子(行，行 - 1)
如何从用户中选择user_id，SUB(row, row - 1)，其中user_id=@userid我的表用户，id 为 1、3、4、10、11、23...(不是++) --id---------u
mysql - 1M 行，1 个表，几列与 300 个表，3000 行，几列与 300 列，3000 行，1 个表？
我曾尝试四处寻找解决此问题的最佳方法，但我找不到此类问题的任何先前示例。我正在构建一个基于超本地化的互联网购物中心，该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
php - 我在第 32 行、第 34 行、第 36 行、第 38 行有错误 :Notice: Undefined offset: 1 in C:\wamp\www\index. php
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
正则表达式 - 如何删除前 10 行/和最后 10 行
我正在尝试创建一个正则表达式，使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白，但效果不佳。最
java - 结果集返回 3 行，但我只能打印 2 行？
下面的代码从数据库中获取我需要的信息，但没有打印出所有信息。首先，我知道它从表中获取了所有正确的信息，因为我已经在 sql Developer 中尝试过查询。 public static void m
sql - 选择前 10 行，然后随机选择其中 5 行
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
c# - 数据库操作预计影响 1 行，但实际影响 0 行
我试图在两个表中插入记录，但出现异常。您能帮我解决这个问题吗？首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
css - 在桌面上显示 1 行，在移动设备上显示 2 行
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
mysql - 从表中选择前 X 行，忽略前 Y 行
如果我想从表中检索前 10 行，我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。如果我在下面执行这段代码，
java - 为什么 [列,行] 而不是 [行,列]
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
PHP - 显示表中最后 3 行 SQL 行(不起作用)
我正在尝试在我的网站上开发一个用户个人资料系统，其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录，但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢？ query($q)
php - MySQL 组相同的标题(行)并求和金钱(行)，但保留单独的时间戳进行排序
我在互联网上寻找答案，但找不到任何答案。 (我可能问错了？)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
mysql - 获取 100 行，每组最多 10 行
我有以下查询，我想从数据库中获取 100 个项目，但 host_id 多次出现在 urls 表中，我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
sql - 如何查询前 10 行，下一次从表中查询其他 10 行
我的数据库表中有超过 500 行具有特定日期。查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。如何逐行查询
bash - 打印 n 行，然后在大文本文件中跳过 n 行
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等，直到文本文件结束。例如在第 4 行声明，打印 5-9，跳过 10-14，打印 15-19 等来自文件 1 2 3 4 5 6
php - 验证密码返回 0 行，而预期返回 1 行
我目前正在执行验证过程来检查用户的旧密码，但问题是我无法理解为什么我的查询返回零行，而预期它有 1 行。另一件事是，即使我不将密码文本转换为 md5，哈希密码仍然得到正确的答案，但我不知道为什么会发生

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当没有行与搜索输入匹配时，如何隐藏表的元素？ - Javascript

首页

博学

6Ren·AI

商城

javascript - 当没有行与搜索输入匹配时，如何隐藏表的 元素？ - Javascript

javascript - 当没有行与搜索输入匹配时，如何隐藏表的元素？ - Javascript