代码如下(暂时没有用原生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. MVC5 Api Area 区域

    到Area区分不同的模块让项目结构更加的清晰 TODO 步骤如下: 项目 –> 添加 -> 区域 (Area) 添加路由规则 public static class WebApiConfi ...

  2. django rest_framework 分页出现报错

    1.出现: WARNINGS: ?: (rest_framework.W001) You have specified a default PAGE_SIZE pagination rest_fram ...

  3. wpf-X名称空间Attribute

    1.x:class 该属性用于 后台代码与前端xaml代码连接 代码实例如下图 2.x:ClassModifier 该属性用于控制可见级别  public 等 与C#中的可见级别相同 internal ...

  4. BULK语句 将TXT数据塞入数据库表格

    SET @iSQL=N'BULK INSERT [TEST].[dbo].[TEST_Interim]'+' FROM '+quotename(@fullFileName,'''')+' WITH ( ...

  5. Python全栈之路----递归

    alex博客中递归的博文     我之前确实没讲明白递归这个东西 递归就是在函数的运行过程中调用自己. 但递归不断调用自己是有限度的,默认限度为1000.函数不断被压进栈,当超过递归限度时会造成栈溢出 ...

  6. 学习笔记TF029:实现进阶卷积网络

    经典数据集CIFAR-10,60000张32x32彩色图像,训练集50000张,测试集10000张.标注10类,每类图片6000张.airplance.automobile.bird.cat.deer ...

  7. Spring Boot 非常好的学习资料

    from@https://gitee.com/didispace/SpringBoot-Learning Spring Boot 2.0 新特性学习 简介与概览 Spring Boot 2.0 正式发 ...

  8. (思维导图搞定)Content-Type:application/json,后台如何接收

    自己定的规范:只要Content-Type设置为application/json的时候,前台的data要传递字符串 虽然设置为application/json,前台传对象request.getPara ...

  9. 如何写一个makefile

    最近因为编译需求,需要更改一些编译条件,顺带看了一些Makefile相关的知识,介绍的很详细,但是例子很少,拆分的比较零碎.初学的话,确实有点压力,我还是喜欢直接在原有的基础上改一些东西,然后遇到问题 ...

  10. crontab定时任务第一个周期未完成下一个周期执行就来了

    一.现象 有一个定时任务,每分钟执行一次,前一分钟还没有执行完成,下一个分钟就来了,怎么解决. 二.模拟 #!/bin/bash echo "开始 `date` " >> ...