<!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. 2.1 View与ViewGroup的概念

    http://www.runoob.com/w3cnote/android-tutorial-view-viewgroup-intro.html UI Overview 在Android APP中,所 ...

  2. ubuntu　系统判断优盘的指定文件存在

    有很多的时候 会出现没有用的优盘路径 如果代码中写的是绝对路径 就有可能读不到优盘的内容 ,以下代码就是可以解决这样的问题 我已经封装成一个类 upanpath.h #ifndef UPANPATH_ ...

  3. abp 取消权限校验

    在abp中,通过ABP_PERMISSIONS表来存储定义appService中的方法权限校验.设置方式如下: [AbpAuthorize(PermissionNames.Pages_Users)] ...

  4. Luogu4219 BJOI2014 大融合 LCT

    传送门 题意:写一个数据结构,支持图上连边(保证图是森林)和询问一条边两端的连通块大小的乘积.$\text{点数.询问数} \leq 10^5$ 图上连边,$LCT$跑不掉 支持子树$size$有点麻 ...

  5. 数列分块入门九题（一）：LOJ6277~6279

    Preface 分块,一个神奇的暴力算法.可以把很多\(O(n^2)\)的数据结构题的暴力优化到常数极小的\(O(n\sqrt n)\).当一些毒瘤题无法用线段树,主席树,平衡树,树状数组...... ...

  6. TensorFlow入门（五）多层 LSTM 通俗易懂版

    欢迎转载,但请务必注明原文出处及作者信息. @author: huangyongye @creat_date: 2017-03-09 前言: 根据我本人学习 TensorFlow 实现 LSTM 的经 ...

  7. R绘图 第七篇：绘制条形图（ggplot2）

    使用geom_bar()函数绘制条形图,条形图的高度通常表示两种情况之一:每组中的数据的个数,或数据框中列的值,高度表示的含义是由geom_bar()函数的参数stat决定的,stat在geom_ba ...

  8. python基础学习笔记（四）

    列表 本节继续讨论列表不同元组和字符串的地方:列表是可变的(mutable)----可以改变列表的内容,并且列表有很多有用的.专门的方法. List函数可以将一个字符串拆分成列表. >>& ...

  9. 个人阅读作业2—《No Silver Bullet: Essence and Accidents of Software Engineering》读后感

    在进行了一次结对编程.一次团队编程和一次个人编程项目后,读了<No Silver Bullet: Essence and Accidents of Software Engineering> ...

  10. PairProject 总结

    结对编程人员:张迎春,赵梓皓.下面是我们一起编程的照片. 结对编程的优点: 首先,结对编程的目的是为了减少编程的错误,在编程的时候,大家一起检查错误,一起分析有没有更加合理的编写方法,所以这是结对编程 ...