示例:

<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. 【JavaScript的引入方式】

    javascript:   是基于对象和事件驱动的客户端脚本[组成] Bom:浏览对象模型(与浏览器交互的方法和接口) Dom:文档对象模型(处理网页内容的方法和接口) ecma:核心(描述了js的语 ...

  2. 关于maven项install时报找不到符号的错误

    解决办法: 聚合工程: 1.eclipse中执行project -->clean,将项目清理一下: 2.选中聚和工程右键-->Run As-->Maven builed...--&g ...

  3. HDU 1019 Least Common Multiple【gcd+lcm+水+多个数的lcm】

    Least Common Multiple Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  4. [国嵌攻略][148][MTD系统架构]

    MTD设备概述 Flash在嵌入式系统中是必不可少的,它是bootloader.Linux内核和文件系统的最佳载体.在Linux内核中引入了MTD子系统为NOR Flash和Nand FLash设备提 ...

  5. [国嵌攻略][052][NandFlash驱动设计_读]

    NandFlash读数据方式 1.页读,读出页中主数据区的所有数据,提供页地址(行地址) 2.随机读,读出页中指定的存储单元的数据,提供页地址(行地址)和页内偏移(行地址) 代码编写 1.根据Nand ...

  6. 同一台电脑使用 gitlab 和 github 配置

    Git 客户端与服务器端的通信支持多种协议,ssh 最常用.ssh的公钥登录流程,用户将自己的公钥存储在远程主机,登录时,远程主机会向用户发送一条消息,用户用自己的私钥加密后,再发给服务器.远程主机用 ...

  7. [C#]使用控制台获取天气预报

    本例子主要是使用由中央气象局网站(http://www.nmc.gov.cn)提供的JSON API,其实现思路如下: 1.访问获取省份(包含直辖市.自治区等,以下简称省份)的网址(http://ww ...

  8. IO代码记忆

    FileWriter fw = new FileWriter("hello.txt"); String s = "hello world"; fw.write( ...

  9. textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  10. // 关闭调试模式  define('APP_DEBUG', false);

    调试模式的优势在于: 开启日志记录,任何错误信息和调试信息都会详细记录,便于调试: 关闭模板缓存,模板修改可以即时生效: 记录SQL日志,方便分析SQL: 关闭字段缓存,数据表字段修改不受缓存影响: ...