首页 > 代码库 > jquery实现简单搜索$("p:contains()")

jquery实现简单搜索$("p:contains()")

2024-09-30 21:07:01   216人阅读

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>contains</title>
    <script src="http://www.mamicode.com/js/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="search">
    <button id="sub">搜索</button>
    <table width="100%" border=1>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>邮箱</th>
            <th>地区</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>zhangsan@qq.com</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>lisi@qq.com</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张五</td>
            <td>女</td>
            <td>zhangwu@qq.com</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵四</td>
            <td>男</td>
            <td>zhaosi@qq.com</td>
            <td>深圳</td>
        </tr>
    </table>
</body>
<!-- <script></script>放在body的后面，但是它会自动地放到body的里面 -->
<script src="http://www.mamicode.com/js/a1.js">
$("#sub").click(function() {
    var val = $("#search").val(); // 获取搜索词

    if (val.length > 0) {
        $("tr:not(:first)").hide(); // 除了第一行外的所有行隐藏
        $("tr:contains(" + val + ")").show(); // 包含搜索词的行显示
    } else {
        $("tr").show();
    }
});
</script>
</html>

 

jquery实现简单搜索$("p:contains()")


联系
我们