jQuery应用操作之---表格
示例:
<table>
<thread>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thread>
<tbody>
<tr><td>张三</td><td>男</td><td>宁波</td></tr>
<tr><td>李四</td><td>男</td><td>杭州</td></tr>
<tr><td>王五</td><td>男</td><td>长沙</td></tr>
<tr><td>赵六</td><td>男</td><td>温州</td></tr>
</tbody>
</table>
1、隔行变色:
CSS代码:
.even{background:red};
.odd{background:green};
然后分别给奇偶行添加样式如下:
$(function(){
$("tr:even").addClass(even);
$("tr:odd").addClass(odd);
});
上述代码会吧表头也算进去,这里需要排除表头<thread>中的<tr>,如下:
$(function(){
$("<tbody>tr:even").addClass(even);
$("<tbody>tr:odd").addClass(odd);
});
如果需要对选中行执行高亮,如下:
$("tr:contains('张三')").addClass("selected");
2、内容筛选
例如要筛选出含有文本“李”的表格行:
$(function(){
$("table tbody tr").hide()
filter(":contains('李')").show();
});
所以,文本框中输入“李”时,就会筛选出相应的表格行,执行代码如下:
$(function(){
$("filterName").keyup(function(){
$("table tbody tr").hide()
filter(":contains('"+($(this).val())+"')").show();
}).keyup();
});
jQuery应用操作之---表格的更多相关文章
- 关于jquery简单操作简单表格
最近在摸索jquery中,想着学习过程中还是记下点自己的东西比较好,不管是日后自己查阅,亦或是对于他人有些许帮助. 也是一件两全其美的事情了. 下面我就简单 贴上自己的html中重要部分了. 具体实现 ...
- jQuery(6)——jQuery对表单、表格的操作及更多应用
jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...
- jQuery 对表单、表格的操作及更多应用-简略笔记
[jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...
- 转:jQuery 常见操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
- jQuery 常见操作实现方式
一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...
- JQuery常用操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
- jQuery——能够编辑的表格
版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635 今天学习了利用jQuery实现能够编辑的表格这个 ...
- jQuery其他操作与bootstrap框架
目录 标签操作 样式操作 位置操作 文本值操作 属性操作 文档处理 事件操作 常见事件 克隆案例 悬浮事件hover() 监听input输入值事件 阻止后续事件 事件委托 动画效果 bootstrap ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
随机推荐
- metasploit魔鬼训练营(收集外围信息)
现在我们时空穿越,来到魔鬼训练营的主角身上,现在我们要训练,对V公司进行渗透测试,回想起总监说的情报收集 1,外围搜集,指的是自己假装是一个正常用户来搜集情报 我们开启msf用auxiliary/sc ...
- 【Java学习笔记之十二】Java8增强的工具类:Arrays的用法整理总结
本文将整理 java.util.Arrays 工具类比较常用的方法: 本文介绍的方法基于JDK 1.7 之上. 1. asList方法 @SafeVarargs public static &l ...
- bzoj:2018 [Usaco2009 Nov]农场技艺大赛
Description Input 第1行:10个空格分开的整数: N, a, b, c, d, e, f, g, h, M Output 第1行:满足总重量最轻,且用度之和最大的N头奶牛的总体重模M ...
- 总结过滤器,监听器,servlet的异同点,已经执行顺序。
1.过滤器 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml ...
- c语言sizeof用法(32位机)
- [国嵌笔记][023][ARM寻址方式]
寻找方式 1.处理器根据指令中给出的信息来找到指令所需操作数的方式 2.立即数寻址 操作数本身在指令中给出,立即数前加”#”表示立即数寻址,操作数在指令中 3.寄存器寻址 利用寄存器中的数值作为操作数 ...
- api接口token验证
接口特点汇总: 1.因为是非开放性的,所以所有的接口都是封闭的,只对公司内部的产品有效: 2.因为是非开放性的,所以OAuth那套协议是行不通的,因为没有中间用户的授权过程: 3.有点接口需要用户登录 ...
- client和nginx简易交互过程
# client和nginx简易交互过程- step1:client发起http请求- step2:dns服务器解析域名得到主机ip- step3:默认端口为80,通过ip+port建立tcp/ip链 ...
- TCP是什么? 最简单的三次握手说明
TCP是什么? TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的.可靠的. 基于IP的传输层协议.TCP在IP报文的协议号是6.TCP是一 ...
- vue中什么样的数据可以是在视图中显示
1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} < ...