代码如下（暂时没有用原生js实现）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="jquery-3.3.1.min.js"></script>

    <style>

        table{

            width: 224px;

            height: 50px;

            text-align: center;

            border-collapse: collapse;

        }

        table,td,tr,th{

            border: 1px solid orange;

        }

        td,th,tr,thead{

            box-shadow: 1px 1px 2px salmon;

            padding-top: 5px;

            padding-bottom: 5px;

        }

        tr.parent{

            background-color: teal;

            color: white;

        }

        tr.child_row_01,tr.child_row_02,tr.child_row_03{

            display: none;

        }

        .selected{

            background-color: darkorange !important;

        }

        .td_selected{

            background-color: salmon !important;

        }

        input{

            margin-bottom: 20px;

        }

    </style>

</head>

<body>

    <input type="text" id="filter">

    <table>

        <thead>

            <tr>

                <th>姓名</th>

                <th>年龄</th>

                <th>年级</th>

            </tr>

        </thead>

        <tbody>

            <tr class="parent" id="row_01" >

                <td colspan="3">管理科学</td>

            </tr>

            <tr class="child_row_01">

                <td>Olivia</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="child_row_01">

                <td>Ethan</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="child_row_01">

                <td>Evelyn</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="parent" id="row_02">

                <td colspan="3">信息管理</td>

            </tr>

            <tr class="child_row_02">

                <td>Grayson</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="child_row_02">

                <td>Audrey</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="child_row_02">

                <td>Chloe</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="parent" id="row_03">

                <td colspan="3">物流管理</td>

            </tr>

            <tr class="child_row_03">

                <td>Zoe</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="child_row_03">

                <td>Lucas</td>

                <td>?</td>

                <td>?</td>

            </tr>

            <tr class="child_row_03">

                <td>Khloe?</td>

                <td>?</td>

                <td>?</td>

            </tr>

        </tbody>

    </table>

    <script>

        $(function(){

            $("tr.parent").click(function(){

                var child  = $(this).siblings('.child_'+this.id);

                console.log(child);

                if($(child).is(":visible")){

                    $(this).removeClass("selected");

                    child.hide();

                }else{

                    child.show();

                    $(this).addClass("selected");

                }

                // $(this).attr("class","parent selected");

                console.log("1");

            });

            $("tbody>tr[class*=child]").click(function(){

                $(this).addClass("td_selected")

                       .siblings().removeClass("td_selected")

                       .end();//如果下面要回到对$(this)的操作，就用end()方法结束对.siblings()的调用

            });

            $("tr:contains('Zoe')").css("background-color","orange");

            $("#filter").keyup(function(){

                var inputValue = $(this).val();

                var transValue = escape(inputValue);

                var firstLetter = inputValue.slice(0,1);//截取首字母

                var rest = inputValue.slice(1);//截取余下部分

                console.log(rest);

                var queryStr;

                console.log(transValue);

                console.log(firstLetter);

                $("table tbody tr").hide()

                    if(transValue.indexOf("%u") < 0){//如=-1，说明没有找到“%u”，即不是中文/编码>255的字符

                        var upperCase = firstLetter.toUpperCase();

                        console.log(upperCase);

                        queryStr = upperCase + rest;//将首字母转换为大写后再与剩余部分拼接，作为查询字符串

                        console.log(queryStr);

                    }else{

                        queryStr = inputValue;

                        console.log(queryStr);

                    };

                    $("table tbody tr").hide()

                    .filter(":contains('" + ( queryStr ) + "')").show();//字符串拼接~

            });

        });

    </script>

</body>

</html>

Jquery对表格的一些简单应用 查询&即时匹配&点击高亮等的更多相关文章

  1. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  2. 超级简单的jquery操作表格(添加/删除行、添加/删除列)

    利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...

  3. 如何利用jquery 实现表格数据的搜索功能

    在表格的操作中,常常会遇到通过关键字来搜索结果,这个功能用jquery的filter实现非常简单. 我以一个小例子说明: <table> <thead> <tr cols ...

  4. ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能

    参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...

  5. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  6. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  7. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  8. 使用jquery扩展表格行合并方法探究

    1.前言 最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中 ...

  9. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

随机推荐

  1. Java语法基础学习DayTwelve（泛型）

    一.泛型(Generic)在集合中的使用 1.作用 (1)解决元素存储的安全问题 (2)解决获取数据元素时,需要类型强转的问题 2.代码案例 //在集合没有使用泛型的情况下 List list = n ...

  2. UnsupportedClassVersionError: org/apache/maven/plugin/compiler/CompilerMojo : Unsupported major.minor version 51.0

    这篇博主说明了原因并给出了相应的解决方案!!! 博文连接如下: https://www.cnblogs.com/qiumingcheng/p/7151629.html

  3. AspectJ的拓展学习--织入顺序和通知参数指定

    前言: 其实spring的aop非常的强大, 因此研究一下AspectJ还是有必要, 而不是仅仅停留在初级的阶段. 比如spring的事务是基于aop来实现的, 如果不能深入的研究, 可能很多知识点, ...

  4. JAVA基础部分复习(七、JAVA枚举类型使用)

    /** * java中的枚举 * 枚举(enum),是指一个经过排序的.被打包成一个单一实体的项列表.一个枚举的实例可以使用枚举项列表中任意单一项的值. * 枚举在各个语言当中都有着广泛的应用,通常用 ...

  5. Linux下，用命令进行 日志分割、日志合并

    指定文件大小分割: split -b 10m catalina.out imsoft 以每个文本文件10M方式分割日志 文件合并: cat small_file* > large_file

  6. top命令详解---待完善

    Top可以看到的cpu信息有: Tasks: 29 total, 1 running, 28 sleeping, 0 stopped, 0 zombie Cpu(s): 0.3% us, 1.0% s ...

  7. hive数据导出到本地目录 抛异常

    经过反复试验,最终重启hdfs和hive解决问题 hive> insert overwrite local directory '/Users/wooluwalker/Desktop/' sel ...

  8. iis发布----在XP中发布高版本web遇到问题总结

    解决方法是之前在网上看到的,总结一下. 我在vs2010中做的web网页,放到XP系统中发布是遇到问题,XP中的iis版本是iis. 提示.net framework版本上的问题. 1.在网站属性中把 ...

  9. PythonStudy——名称空间 Name space

    # 名称空间:就是名字与地址的对应关系,可以被Python解释器遍历查找,采用堆栈存储方式 # 三种名称空间# Built-in:内置名称空间:系统级,一个:随解释器执行而产生,解释器停止而销毁# G ...

  10. DevExpress中barManager下的toolbar如何在panel中显示

    如题,我的Dev Toolbar需要在一个pannel中显示,并且居于最顶部.可是好像默认情况下toolbar都是在窗体的最顶部的,如何设置才能使其位于一个panel的最顶部呢? 解决方案:经过测试, ...