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不支持多 ...
随机推荐
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](一)
前言 大家好,我是Rector 从今天开始,Rector将为大家推出一个关于创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar]的文章系列, ...
- nohup—后端守护进程
要将一个命令放到后台执行,我们一般使用nohup sh command & 为什么要nohup? 因为我用使用Scrt这种终端工具退出的时候会向我们在当前shell下启动的进程发生一个SIGH ...
- 【Java学习笔记之二十】final关键字在Java继承中的用法小结
谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...
- JAVA实现网页上传头像
大概实现就是在页面嵌入一个file类型的input控件,并且将之隐藏,点击上传传递到这个控件上面,选择文件,将图片以base64的方式传递到后台,后台解码器解码,保存图片,并且把图片名字保存到数据库或 ...
- [学习OpenCV攻略][007][缩小图片]
cvPryDown(输入图片,输出图片) 根据输出图片的大小,把输入图片进行压缩 cvPryUp(输入图片,输出图片) 根据输出图片的大小,把输入图片进行放大 #include "cv.h& ...
- NullPointerException org.apache.commons.digester.Digester.getXMLReader(Digester.java:1058)
http://pwu-developer.blogspot.com/2010/01/nullpointerexception.html Maven is great build tool making ...
- GMP大法教你重新做人(从入门到实战)
一.引言 GMP(The GNU Multiple Precision Arithmetic Library)又叫GNU多精度算术库,是一个提供了很多操作高精度的大整数,浮点数的运算的算术库,几乎没有 ...
- 淘淘商城学习笔记 之 上传图片到远程服务器,图片的回显出现的bug
最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...
- 十二个 ASP.NET Core 例子——中间件
目录: 什么是中间件(IApplicationBuilder) 创建 顺序规则 Asp.Net Core 内置的中间件 1.什么是中间件 官方:中间件是组装成应用程序管道以处理请求和响应的软件.每个组 ...
- API接口安全性设计
http://www.jianshu.com/p/c6518a8f4040 接口的安全性主要围绕Token.Timestamp和Sign三个机制展开设计,保证接口的数据不会被篡改和重复调用,下面具体来 ...