效果图

实现代码：

通过css控制样式，利用jquery的addClass方法实现

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

  <head>

   <title> 实现表格隔行变色 </title>

   <meta http-equiv="Content-Type" content="text/html; chartset=GBK" />

   <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>

   <style type="text/css">

     body{font-size:12px;text-align:center}

     #tbStu{width:90%;border:solid 1px #666;background-color:#eee}

     #tbStu tr{line-height:23px}

     #tbStu tr th{background-color:#ccc;color:#fff}

     #tbStu .trOdd{background-color:#fff}

   </style>

     <script>

         $(function(){

             $("#tbStu tr:nth-child(even)").addClass("trOdd");}

         )

     </script>

  </head>

  <body>

     <table id="tbStu" cellpadding="0" cellspacing="0">

         <tbody>

             <tr>

                 <th>学号</th>

                 <th>姓名</th>

                 <th>性别</th>

                 <th>总分</th>

             </tr>

             <tr>

                 <td>1001</td>

                 <td>张晓明</td>

                 <td>男</td>

                 <td>98</td>

             </tr>

             <tr>

                 <td>1002</td>

                 <td>李小强</td>

                 <td>男</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1003</td>

                 <td>张小花</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1004</td>

                 <td>李小妞</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1001</td>

                 <td>张晓明</td>

                 <td>男</td>

                 <td>98</td>

             </tr>

             <tr>

                 <td>1002</td>

                 <td>李小强</td>

                 <td>男</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1003</td>

                 <td>张小花</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1004</td>

                 <td>李小妞</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1001</td>

                 <td>张晓明</td>

                 <td>男</td>

                 <td>98</td>

             </tr>

             <tr>

                 <td>1002</td>

                 <td>李小强</td>

                 <td>男</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1003</td>

                 <td>张小花</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1004</td>

                 <td>李小妞</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1001</td>

                 <td>张晓明</td>

                 <td>男</td>

                 <td>98</td>

             </tr>

             <tr>

                 <td>1002</td>

                 <td>李小强</td>

                 <td>男</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1003</td>

                 <td>张小花</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

             <tr>

                 <td>1004</td>

                 <td>李小妞</td>

                 <td>女</td>

                 <td>88</td>

             </tr>

         </tbody>

     </table>

  </body>

 </html>

jquery实现html表格隔行变色的更多相关文章

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

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

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

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

  3. Jquery 组 tbale表格隔行变色

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

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

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

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

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

  6. jQuery 表格隔行变色插件

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

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

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

  8. 表格隔行变色_jQuery控制实现鼠标悬停高亮

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

  9. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. GIT 基本操作

    git 流程:1.查看自己所在分支 git branch 2.切换到开发分支 git checkout develop3.把代码拉下来 git fetch4.合并到自己本地 git merge5.切换 ...

  2. 【JavaScript】获取未知类的结构

    目录结构: // contents structure [-] 为什么需要获取类的结构 关于JavaScript中的类 定义类的方法 第一种 第二种 DEMO HTML页面 date文件 注意事项 参 ...

  3. input输入框限制仅能输入数字且规定数字长度（使用与输入手机号）

    现在越来越多的账户名使用手机号来登录,为了减少前后端的交互,需要用户在输入时就要进行格式的判断, 目前的常规办法是,在输入完成后进行判断. 下面的方法是在输入时就规定只能输入数字,其他格式的字符是无法 ...

  4. php文件之间传值的三种主流并且常用的方式

    一.表单传值 在<form>中的action填入要跳转页面的路径,method填入POST或者GET方法.表单中的提交按钮按下后,就会把<form>中有value都传到要跳转的 ...

  5. Civil 3D API二次开发学习指南

    Civil 3D构建于AutoCAD 和 Map 3D之上,在学习Civil 3D API二次开发之前,您至少需要了解AutoCAD API的二次开发,你可以参考AutoCAD .NET API二次开 ...

  6. 获取本机IP地址

    这里有两种方法: //获取本机IP - (NSString *)localIPAddress { NSString *localIP = nil; struct ifaddrs *addrs; ) { ...

  7. JavaScript的个人学习随手记（二）

    JS HTML DOM 改变 HTML 输出流 JavaScript 能够创建动态的 HTML 内容: 今天的日期是: Sat Sep 24 2016 15:06:50 GMT+0800 (中国标准时 ...

  8. 清理iOS工程里无用的图片，可瘦身ipa

    工程在经过多人后,往往会出现较多的垃圾,导致打包出来的ipa文件偏大,有时候我们会通过清理代码来给程序瘦身,而瘦身ipa效果明显的,主要通过清理程序里的无用图片. 推荐一个清理图片的应用 https: ...

  9. 从0到1，教你实现基于Ruby的watir-webdriver自动化测试

    一.为什么选择Ruby []完全开源. []多平台:Ruby可以运行在Linux, UNIX, Windows, MS-DOS, BeOS, OS/.. []多线程:线程就是指在一个程序中处理若干控制 ...

  10. zDiaLog弹出层

    zDiaLog弹出层  立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...