JQuery：实现筛选功能

最新推荐文章于 2022-12-10 22:38:21 发布

原创最新推荐文章于 2022-12-10 22:38:21 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原创，想转就转

文章标签：

#JQuery #js #JavaScript #筛选 #搜索

Javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单脚本，该脚本能根据类别或标题关键字筛选并显示相应的新闻条目。通过分析HTML结构，脚本首先隐藏所有新闻内容，然后仅显示包含指定关键字的条目。

  <div id="newNews" class="commonfrm">
                <h4>最新消息</h4>
                <table>
                    <tr id="t_head">
                         <th class="th_category">类别</th>
                         <th>标题</th>
                         <th class="th_time">发布时间</th>
                    </tr>
                    <tr>
                        <td ><a href="#" class="td_category">[政治]</a></td>
                        <td><a href="#">闺蜜干政</a></td>
                        <td class="td_time">12-21 15:55</td>
                    </tr>
                    <tr>
                        <td ><a href="#" class="td_category">[娱乐]</a></td>
                        <td><a href="#">皇家赌场</a></td>
                        <td class="td_time">12-21 15:55</td>
                    </tr>
                    <tr>
                         <td ><a href="#" class="td_category">[时尚]</a></td>
                        <td><a href="#">帅气衣服</a></td>
                        <td class="td_time">12-21 15:55</td>
                    </tr>
                    <tr>
                        <td><a href="#" class="td_category">[政治]</a></td>
                        <td><a href="#">访俄罗斯</a></td>
                        <td class="td_time">12-21 15:55</td>
                    </tr>
                    <tr>
                        <td><a href="#" class="td_category">[体育]</a></td>
                        <td><a href="#">足球</a></td>
                        <td class="td_time">12-21 15:55</td>
                    </tr>
                    <tr>
                        <td><a href="#" class="td_category">[体育]</a></td>
                        <td><a href="#">羽毛球夺冠</a></td>
                        <td class="td_time">12-21 15:55</td>
                    </tr>
                </table>
            </div>
            <script>
                $("#ibtnSearch").click(function () {
                    var content = $("#t_head").siblings();
                    var key=$("#txtKey").val();
                    if ($("#radcategory")[0].checked)
                    {
                        content.hide().children(':first-child:contains("'+key+'")').parent().show()
                    }
                    else
                        content.hide().children(':nth-child(2):contains("'+key+'")').parent().show();
                })
            </script>

初始页面如图所示