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不支持多 ...
随机推荐
- GNS3的配置
为了更好的了解协议我决定学习CCNA 安装好GNS3后我们打开 点击设置 先把iso解压,解压完成后倒入 保存结束 然后在输入idlepc get 设备名称 来计算idepc的值 idepc能让我们p ...
- deeplearning.ai 神经网络和深度学习 week1 深度学习概论 听课笔记
1. 预测房价.广告点击率:典型的神经网络,standard NN. 图像:卷积神经网络,CNN. 一维序列数据,如音频,翻译:循环神经网络,RNN. 无人驾驶,涉及到图像.雷达等更多的数据类型:混合 ...
- bzoj 1705;poj 3612:[Usaco2007 Nov]Telephone Wire 架设电话线
Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设在已有的N(2 <= ...
- 状压dp初探
写了几道状压...然后就一直在颓废... 2064: 分裂 http://www.lydsy.com/JudgeOnline/problem.php?id=2064 初始的为正,最后的为负,假设我们能 ...
- CentOS6下安装git
Ubuntu12.04中默认没有安装Git.需要自行安装. 1. 安装Git 1.1 Ubuntu12.04下 可以使用apt-get方式安装,也可以下载源代码安装[1],我们这里使用apt-git安 ...
- 调用webService的几种方式
转自:http://blog.csdn.net/u011165335/article/details/51345224 一.概览 方式1: HttpClient:可以用来调用webservie服务,也 ...
- [国嵌攻略][179][OpenSSL加密系统]
未加密传输的安全弊端 如果在网络传输中没有加密,就是以明文传输.传输的数据可以被抓包软件直接截获,并能读取里面的数据. 加密基本原理 1.对称加密 2.非对称加密 2.1.公钥私钥 公钥和私密要配对. ...
- [国嵌攻略][060][LCD工作原理解析]
LCD硬件体系 1.LCD液晶屏 液晶属于一种有机化合物,分子形状为长棒状,在不同的电流作用下,分子会有规律旋转,这样对光线产生一定的控制形成一个像素,而很多像素右可以构成完整的图像. LCD是Liq ...
- 冒泡排序和选择排序-java
冒泡排序 假设有一数组int [] arr = {9,5,4,10,2};原理是第一个元素和第二个比较,如果前者大于后者便交换位置,然后第二个元素和第三个元素比较,如果前者大于后者便交换位置.以此类 ...
- fireasy 使用篇 - 简介
一.Fireasy 简介 Fireasy是一套基于.Net Framework应用开发组件,其主旨思想为“让开发变为更简单”,其义为,使用尽可能少的组件,实现你所需的功能.Fireasy几乎覆盖了开发 ...