<!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. NodeJS之path模块

    NodeJS之path模块 常用的主要有如下工具函数: 1. path.basename(path[, ext]) 2. path.extname(path) 3. path.dirname(path ...

  2. HTML 浏览器抓包

    1.浏览器 2.抓包 3.查看get/post/cookie 一 谷歌浏览器 二 抓包查看get/post数据.cookie 截图:

  3. 【Codeforces Round 1137】Codeforces #545 (Div. 1)

    Codeforces Round 1137 这场比赛做了\(A\).\(B\),排名\(376\). 主要是\(A\)题做的时间又长又交了两次\(wa4\)的. 这两次错误的提交是因为我第一开始想的求 ...

  4. node通过http.request向其他服务器上传文件

    function upload(callback) { let boundaryKey = '----' + new Date().getTime(); // 用于标识请求数据段 let option ...

  5. Java原子类AtomicInteger实现原理的一点总结

    java原子类不多,包路径位于:java.util.concurrent.atomic,大致有如下的类: java.util.concurrent.atomic.AtomicBoolean java. ...

  6. SkylineGlobe6.5遍历信息树节点方法

    //------------------- //searchGeometries function searchGeometries2(parentNode, callbackFunc) { SGWo ...

  7. Tensorflow-hub[例子解析2]

    接Tensorflow-hub[例子解析1]. 3 基于文本词向量的例子 3.1 创建Module 可以从Tensorflow-hub[例子解析1].中看出,hub相对之前减少了更多的工作量. 首先, ...

  8. 《MySQL必知必会》[06] 触发器

    1.触发器 MySQL中的触发器概念,和Java中的事件监听器有点相似.当你想要某条语句在某个事件发生时自动执行,就要用到触发器了. 触发器能响应如下三类语句: DELETE INSERT UPDAT ...

  9. 搭建mysql cluster

    虚拟机搭建Mysql Cluster 参考文档:http://www.cnblogs.com/jackluo/archive/2013/01/19/2868152.html http://www.cn ...

  10. Spring-bean的循环依赖以及解决方式

    链接:https://blog.csdn.net/u010853261/article/details/77940767 https://www.jianshu.com/p/6c359768b1dc