Jquery对表格的一些简单应用 查询&即时匹配&点击高亮等
代码如下（暂时没有用原生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对表格的一些简单应用 查询&即时匹配&点击高亮等的更多相关文章
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...
- 如何利用jquery 实现表格数据的搜索功能
在表格的操作中,常常会遇到通过关键字来搜索结果,这个功能用jquery的filter实现非常简单. 我以一个小例子说明: <table> <thead> <tr cols ...
- ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能
参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...
- JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- 使用jquery扩展表格行合并方法探究
1.前言 最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中 ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
随机推荐
- effective java——12考虑实现coparable接口
float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的.然而,它们没有提供完全精确的结果,所以不应该 ...
- 事件对象的属性，基于jQuery(jquery针对不同浏览器进行了兼容性的封装)
1. event.type(该方法是获取到事件的类型) $( 'a' ).click( function( event ){ alert( event.type ); //click return f ...
- elasticsearch 使用快照进行备份
Elasticsearch也提供了备份集群中索引数据的策略——snapshot API.它会备份整个集群的当前状态和数据,并保存到集群中各个节点共享的仓库中.这个备份的进程是增量备份的,在第一次备份的 ...
- [转] Ubuntu16.04完美安装Sublime text3
转载自:https://www.cnblogs.com/hupeng1234/p/6957623.html 1.安装方法 1)使用ppa安装 sudo add-apt-repository ppa:w ...
- L2-023. 图着色问题*
L2-023. 图着色问题 参考博客 #include <iostream> #include <cstring> #include <set> using nam ...
- 关于c风格的字符串的基本函数
1.两个字符串的比较 //如果两个字符串相等 strcmp(s1,s2)=; //如果s1>s2 strcmp(s1,s2)>; //如果s1<s2 strcmp(s1,s2)< ...
- 2018.4.24 快排查找第K大
import java.util.Arrays; /* 核心思想:利用快排思想,先假定从大到小排序,找枢纽,枢纽会把大小分开它的两边,当枢纽下标等于k时, 即分了k位在它左边或右边,也就是最大或最小的 ...
- Nmap使用指南
一.目标指定 1.CIDR标志位 192.168.1.0/24 2.指定范围 192.168.1.1-255 192.168.1-255.1(任意位置) 3.IPv6地址只能用规范的IPv6地址或主机 ...
- 接口测试基础——第3篇smtplib发送带图片的邮件
smtplib发送邮件最后一篇,发送带图片的邮件: 大家可以去廖雪峰的网站看一下,下面的代码就是我跟着博客写的,哈哈,大家即使不明白为什么,也要多写两遍,记在心里,如果有不明白的地方可以留言,船长会第 ...
- c#利用ApplicationContext类 同时启动双窗体的实现
Application类(位于System.Windows.Forms命名空间)公开了Run方法,可以调用该方法来调度应用程序进入消息循环.Run方法有三个重载 1.第一个重载版本不带任何参数,比较少 ...