JQuery： 实现筛选功能

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

初始页面如图所示

结果如图

第一步先找到所有内容，将所有内容隐藏起来。

然后利用内容过滤选择器contain将相关消息显示出来。   注：nth-child(2)为父元素的第二个子元素

上述代码有根据类别筛选和根据标题筛选。当根据标题筛选 '球'  的时候。找到 tr 中的第二个孩子是否包含 '球'，如果有的话把整个tr显示出来