如何使用 jquery 实现类似 ctrl+f 的搜索答案

【问题标题】：How can i implement search like ctrl+f with jquery如何使用 jquery 实现类似 ctrl+f 的搜索
【发布时间】：2017-01-31 10:04:51
【问题描述】：

嗨，我正在尝试在页面 table tbody 上搜索，搜索应该是 ctrl + F 搜索我的 html 和 php 代码：

请参阅下面链接的图片和链接以获取来源。

    <table>
    <thead>
    <tr><td><input type="text" placeholder="Search Student id="searchStudent"> </td>
    <td></td><td></td><td></td><td></td><td></td></tr>
    </thead>

    <tbody>
    <tr>
    <td>
     <span><img src="<?php echo $gdScoreData['profile_pic']; ?>"/></span>
        <p><?php echo $gdScoreData['student_fname'];?> <?php echo $gdScoreData['student_lname'];?></p>
<p><b>Hallticket</b> : S<?php echo $gdScoreData['student_pid']; ?>J<?php echo $jobID; ?></p>
         </td>
    <td></td><td></td><td></td><td></td><td></td></tr>

第一个 tr 将在此处关闭 php 代码是上面的 html 代码，如下图所示：

<tr><td><span><img src="profile_pic/first_1479536519.jpg" width="50" /></span><p>Robert Smith</p><p><b>Hallticket</b> : S27J2</p></td></tr>
</tbody>
</table>

这是我的 javascript 代码，可以像 ctrl + F 一样搜索

/* Search Student like ctrl+f start */
$("#searchStudent").on("keyup", function() {
    var value = $(this).val();
    console.log(value);
    $("table tbody tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.find("td:first").text();

            if (id.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});
/* Search Student like ctrl+f end*/

这是我尝试过的来源： Source JS

【问题讨论】：

你到底想要什么？您的 jsfiddle-Code 似乎运行良好...
这不是我想要实现的 js 小提琴，但它对我不起作用。搜索不起作用。我认为错误就在这里：var id = $row.find("td:first ").text();

标签： javascript php jquery html search

【解决方案1】：

我已经修改了你的 js fiddle 代码，现在它可以工作了 jsfiddle.net/rFGWZ/3406/

       $("#search").on("keyup", function() {
        var value = $(this).val();
       if(value!='') {
           $("table tbody tr").hide();
       }else{
           $("table tbody tr").show();
       }
         $('table tbody tr td:contains("'+value+'")').parent('tr').show(); 
       });

【讨论】：

【解决方案2】：

基本上您的代码可以正常工作，但它没有拾取标签内的元素尝试添加以下内容：

var id2 = $row.find("b:first").text();

并改变这个：

if (id2.indexOf(value) !== 0) {

然后根据粗体内容搜索，它应该可以工作

您可以这样尝试并单独搜索每个部分：

$id = $row.find("td:first");
var id2 = $id.find("b:first").text();
var id3 = $id.find("p:first").text();
if (id2.indexOf(value) !== 0 && id3.indexOf(value) !== 0) {

【讨论】：

没有改进。

【解决方案3】：

$("#searchStudent").on("keyup", function() {
    var value = $(this).val();
    if(value!='') {
        $("table tbody tr").hide();
        }else{
        $("table tbody tr").show();
    }
    $('table tbody tr td:contains("'+value+'")').parent('tr').show(); 
});

我已经通过这个帮助解决了。

【讨论】：