<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>

    table{
   border:1px solid #000;
   width: 400px;
   text-align: center;
   border-collapse: collapse;
  }
  thead tr{
   border: 1px solid #000;
  }
  .even{background: #FFF38F;}
  .odd{background: #FFFfEE;}
  tbody tr:hover{
   color:blue;
  }
  .selected{
   color:red;
  }
 </style>
</head>
<body>
  <table>
  <thead>
    <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
   </tr>
  </thead>
  <tbody>
    <tr><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山2</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山3</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山5</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
  </tbody>
 </table>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
 $(function(){
  $("tr:odd").addClass("odd");
  $("tr:even").addClass("even");
  $("tr:contains('张山4')").addClass("selected");
 })
</script>
</html>

Jquery 组 tbale表格隔行变色的更多相关文章

  1. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  2. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  3. jquery简单实现表格隔行变色

    小知识点:odd的过滤选择器大的使用 html代码: <table> <tr> <td>用户名</td> <td>年龄</td> ...

  4. Jquery 组 tbale表格筛选

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  5. Jquery 组 tbale表格滚动条

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  6. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  7. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  8. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

  9. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

随机推荐

  1. QT 11 鼠标键盘事件添加

    鼠标事件 void mousePressEvent(QMouseEvent *event); //单击 void mouseReleaseEvent(QMouseEvent *event); //释放 ...

  2. .Net修改网站项目调试时的虚拟目录

    点中网站项目按F4,虚拟目录那个栏目全部删掉!

  3. Qt+QGis二次开发：打开S-57格式(*.000)电子海图数据，并设置多边形要素的显示风格

    不过多的废话了,直接上源码: addChartlayers()方法时“打开海图”按钮的triggered()信号所绑定的槽函数. //添加海图数据小按钮槽函数 void MainWindow::add ...

  4. storm集成kafka的应用，从kafka读取，写入kafka

    storm集成kafka的应用,从kafka读取,写入kafka by 小闪电 0前言 storm的主要作用是进行流式的实时计算,对于一直产生的数据流处理是非常迅速的,然而大部分数据并不是均匀的数据流 ...

  5. 05-Mirrorgate数据库信息

    1.登录数据库 [root@node1 ~]# mongo localhost: > show dbs; admin .000GB dashboarddb .001GB local .000GB ...

  6. Struts学习总结-02 上传文件

    Struts 2框架提供了内置支持处理文件上传使用基于HTML表单的文件上传.上传一个文件时,它通常会被存储在一个临时目录中,他们应该由Action类进行处理或移动到一个永久的目录,以确保数据不丢失. ...

  7. C# yield关键词使用

    C#有一个关键词yield,简化遍历操作实现的语法糖. 下面Insus.NET使用例子来说明,就拿昨晚的一篇<从字符串数组中把数字的元素找出来> http://www.cnblogs.co ...

  8. （转）Syntax error:

    但是运行时总是报下面这个错,如下: test11-loop.sh: 5: Syntax error: Bad for loop variable 几经查找语法,没有问题,后来在网上找到问题原因: 代码 ...

  9. MongoDB的导入导出

    一:MongoDB的导出功能 mongodb提供了导入和导出的功能,分别是MongoDB下载目录下的mongoexport.exe和mongoimport.exe文件 ,具体的导出命令格式如下: mo ...

  10. Linux lsof 命令

    lsof(list open files)是一个查看进程打开的文件的工具. 在 linux 系统中,一切皆文件.通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以 lsof 命令不仅可以查 ...