微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 我如何使用jquery实现像ctrl f这样的搜索

嗨我正在尝试搜索页面表tbody,搜索应该像ctrl F搜索这个我的HTMLPHP代码

请参阅下面链接图片链接获取来源.

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

第1个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*/

enter image description here

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

解决方法:

我已经修改了你的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(); 
       });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐