<!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. day14 Python函数

    函数def,严格来讲有个return返回值 过程就是没有return返回值的函数 #过程 def test01(): msg = 'liuhaoran' print(msg) #函数 def test ...

  2. leetcode 20. Valid Parentheses 、32. Longest Valid Parentheses 、

    20. Valid Parentheses 错误解法: "[])"就会报错,没考虑到出现')'.']'.'}'时,stack为空的情况,这种情况也无法匹配 class Soluti ...

  3. ftp、ssh

    ftp.ssh都是网络传输的协议,两者一般用来访问服务器,支持ftp的服务器称为ftp服务器,支持ssh的服务器称为ssh服务器. 说白了就是不同的访问方式,ssh更加安全,有相应的密匙 https: ...

  4. PAT A1117 Eddington Number （25 分）——数学题

    British astronomer Eddington liked to ride a bike. It is said that in order to show off his skill, h ...

  5. appbar导航

    import 'package:flutter/material.dart';import 'dart:ui'; void main()=>runApp(MyApp()); class MyAp ...

  6. JAVA 8的新特性

    1.Lambda表达式:允许把函数作为一个方法的参数 Lambda的优点: 1)简洁 2)非常容易并行计算 3)可能代表未来编程趋势 Lambda的缺点: 1)若不要并行计算,很多时候计算速度没有传统 ...

  7. linux 服务器安全加固和内核参数调优 nf_conntrack

    0.内部设置跳板机,服务器只能通过跳板机登录1.禁止ROOT用户远程登录和登录端口 禁止ROOT用户远程登录 .打开 /etc/ssh/sshd_config PermitRootLogin no . ...

  8. NB-IoT协议及其PSM

    物联网技术发展趋势是LPWAN,其中尤其以NB-IoT和eMTC最为代表.NB-IoT和eMTC各有优劣,使用场景互有不同. 低功耗可以说是物联网技术的核心,本着关注低功耗的方向,适当了解NB IoT ...

  9. Attention[Content]

    0. 引言 神经网络中的注意机制就是参考人类的视觉注意机制原理.即人眼在聚焦视野区域中某个小区域时,会投入更多的注意力到这个区域,即以"高分辨率"聚焦于图像的某个区域,同时以&qu ...

  10. 4《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—目录

    我们已经学习过许多处理文件的Unix工具,现在是时候来学习目录了,也就是文件夹(图20).正如我们所见,许多在文件中的开发思想也适用于目录,但同样也有许多区别.