zoukankan      html  css  js  c++  java
  • jquery实现表格的搜索功能

    HTML代码如下:

    <input type="text" id="txt" value="" />
    <input type="button" id="btn" value="搜索" />
    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>13112345678</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>1345454548</td>
            </tr>
            <tr>
                <td>王小花</td>
                <td>女</td>
                <td>1234567890</td>
            </tr>
            <tr>
                <td>笑笑</td>
                <td>女</td>
                <td>1098909223</td>
            </tr>
        </tbody>
    </table>
    View Code

    CSS样式代码如下:

    table{
        width: 700px;
        border: 1px solid #008000;
        margin: 10px 0 0 0;
        border-collapse: collapse;/*表格边框合并*/
    }
    tr{
        height: 30px;
        text-align: center;
    }
    th,td{
        border: 1px solid #008000;
    }
    View Code

    jquery代码如下:(你要先引入jquery的js文件(⊙o⊙)哦)

    $(function () {
        $("#btn").click(function () {
            var $sea=$('#txt').val();
            //先隐藏全部,再把符合筛选条件的值显示
            $('table tbody tr').hide().filter(':contains('+$sea+')').show();
        });
    });

    未进行筛选的样子

    筛选之后(⊙o⊙)哦

    未完待续......

    你也赶紧运行起来吧!!

  • 相关阅读:
    neo4j通过LOAD CSV导入结点和关系
    二叉树的几种遍历方法
    数据结构之二叉排序树
    结合数据结构来看看Java的String类
    变量和对象
    Java虚拟机的内部体系结构
    算法

    freemarker
    solr的安装和启动
  • 原文地址:https://www.cnblogs.com/yuqingfamily/p/5812269.html
Copyright © 2011-2022 走看看