示例:

<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应用操作之---表格的更多相关文章

  1. 关于jquery简单操作简单表格

    最近在摸索jquery中,想着学习过程中还是记下点自己的东西比较好,不管是日后自己查阅,亦或是对于他人有些许帮助. 也是一件两全其美的事情了. 下面我就简单 贴上自己的html中重要部分了. 具体实现 ...

  2. jQuery(6)——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  3. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  4. 转:jQuery 常见操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  5. jQuery 常见操作实现方式

    一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...

  6. JQuery常用操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  7. jQuery——能够编辑的表格

    版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635     今天学习了利用jQuery实现能够编辑的表格这个 ...

  8. jQuery其他操作与bootstrap框架

    目录 标签操作 样式操作 位置操作 文本值操作 属性操作 文档处理 事件操作 常见事件 克隆案例 悬浮事件hover() 监听input输入值事件 阻止后续事件 事件委托 动画效果 bootstrap ...

  9. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

随机推荐

  1. BZOJ 1046: [HAOI2007]上升序列【贪心+二分状态+dp+递归】

    1046: [HAOI2007]上升序列 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4987  Solved: 1732[Submit][Stat ...

  2. Gym 100952G&&2015 HIAST Collegiate Programming Contest G. The jar of divisors【简单博弈】

    G. The jar of divisors time limit per test:2 seconds memory limit per test:64 megabytes input:standa ...

  3. Prim最小生成树板子

    普里姆算法可以称为"加点法",每次迭代选择代价最小的边对应的点,加入到最小生成树中.算法从某一个顶点s开始,逐渐长大覆盖整个连通网的所有顶点. 邻接矩阵存图  时间复杂度O(n^2 ...

  4. hdu_1036(取整和格式控制)

    题意很简单,求平均时间 复习一下如何取整 (int) fl 是直接向下取整  ==  floor(fl) 向上取整 (int)(fl+1)  == ceil(fl) 四舍五入 (int)(fl+0.5 ...

  5. 构建LVS-DR+Keepalive高可用集群

    ------client----------主LVS----------从LVS------------WEB1-------------WEB2--------- 2.2.2.250  2.2.2. ...

  6. c++---天梯赛---N个数求和

    ★题目: ★难点:要求只能以有理数和分数去输出结果. ★分析:可以对输入的数据进行通分处理,随后把结果按格式输出. ★代码: #include<iostream> #include< ...

  7. dedecms_

    2012-7-5(no1)当我们点击检索结果的某个电影超链接时,如何跳转到对应的内容页[本资源由www.qinglongweb.com搜集整理] dedelist标签 --可以嵌套 项目移植: mys ...

  8. vi命令加行号查找替换等命令

    一.加行号           : set nu二.vi查找:    当你用vi打开一个文件后,因为文件太长,如何才能找到你所要查找的关键字呢?在vi里可没有菜单-〉查找,              ...

  9. 利用光场进行深度图估计(Depth Estimation)算法之二——匹配算法

    光场相机由于能够捕获相机内部光线的强度和方向而得到整个光场,可以实现重聚焦(refocus)和视角变换等功能.进而可以进行深度估计获取深度图,前面说过利用重聚焦的图像进行深度估计,今天说一下利用不同视 ...

  10. phpwind9.0升级到php7后出现的问题修复

    最近将一个两年多以前的用phpwind9.0搭建的论坛升级到php7,遇到了页面无法打开,显示为500错误,排查了一整天时间,终于解决! 1.打开文件:src/applications/appcent ...