如何使用jquery实现像ctrl + f这样的搜索

Hi i am trying to search on page table tbody, the search is should be like ctrl + F search this my html and php code:

嗨我正在尝试搜索页面表tbody,搜索应该像ctrl + F搜索这个我的HTML和PHP代码:

Please refer the image and link linked below for the sources.

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

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

1st tr will close here php code is the above one in html it looks like shown in image:

第一个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>

This my javascript code to search like ctrl + F

这是我的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*/

Here is the source from where i have tried: Source JS

以下是我尝试过的来源:Source JS

3 个解决方案

#1

i have modified your js fiddle code now it working jsfiddle.net/rFGWZ/3406/

我已经修改了你的js小提琴代码现在它工作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

Basically your code is working but it is not picking up elements inside your tag try adding the following:

基本上你的代码是有效的,但它没有在你的标签中拾取元素尝试添加以下内容:

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

and changing this:

并改变这个:

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

Then search based on the bold content and it should work

然后根据粗体内容进行搜索,它应该工作

You could try it like this and search on each part individually:

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

$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(); 
});

I have resolved with this help.

我已经解决了这个问题。

#1