<!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 14 线程使用

    1 线程基础 QThread 是对本地平台线程的一个非常好的跨平台抽象.启动一个线程非常简单.让我们看一段代码,它产生另一个线程,该线程打印hello,然后退出. // hellothread/hel ...

  2. 207. Course Schedule

    https://blog.csdn.net/wongleetion/article/details/79433101 问题的实质就是判断一个有向图是否有环,利用入度去解决这个问题 使用bfs解决问题. ...

  3. leetcode 235. Lowest Common Ancestor of a Binary Search Tree 236. Lowest Common Ancestor of a Binary Tree

    https://www.cnblogs.com/grandyang/p/4641968.html http://www.cnblogs.com/grandyang/p/4640572.html 利用二 ...

  4. Qt 获取文件夹下所有文件

    Qt 获取文件夹下所有文件代码如下: QStringList getFileNames(const QString &path) { QDir dir(path); QStringList n ...

  5. python函数查询、数学和比较操作符、二元操作符

    http://www.runoob.com/python/func-number-round.html print().input()用户输入输出,格式为字符串 len() 求字符串的长度 str() ...

  6. ESP32 ADC

    2个12位的ADC,共计18通道,ADC2比较特殊的一点就是:ADC2和wifi共用,wifi的优先级更高,所以ADC2只有在WIFI模块不用的情况下好使: 在读取ADC数据之前,必须先对ADC进行设 ...

  7. Ubuntu触摸屏校准命令

    1.sudo apt-get install utouch 2.sudo apt-get install xinput-calibrator 3.sudo xinput_calibrator(校准两次 ...

  8. Volume is already attached by pod default/nginx-deployment-86dfb99868-szpkd. Status Running

    1.部署WordPress - mysql ,想扩容,修改deployment,结果报错: MountVolume.SetUp failed for volume "pvc-e" ...

  9. linux调度器源码分析 - 运行(四)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 引言 之前的文章已经将调度器的数据结构.初始化.加入进程都进行了分析,这篇文章将主要说明调度器是如何在程序稳定运 ...

  10. [Synthetic-data-with-text-and-image]

    0 引言 本文是之前为了解决如何将文字贴到图片上而编写的代码,默认是如发票一类的,所以并未考虑透视变换等.且采用的是pygame粘贴方式,之前也尝试过opencv的seamlessClone粘贴. 值 ...