效果图

实现代码：

通过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. ADO.NET 中的新增功能

    ADO.NET 中的新增功能: .NET Framework (current version) 以下是 .NET Framework 4.5 中 ADO.NET 的新增功能. SqlClient D ...

  2. 字体属性设置（一）：谷歌浏览器12px以下字体的显示；方法和原理

    前言: chrome 谷歌浏览器默认的字体大小为16px:可以通过设置font-size来设置字体大小但是当设置到12px以下的时候字体大小不再改变:对于想设置其他大小的字体就很头疼,本文参考网上的方 ...

  3. 使用React制作一个可配置的页面生成器[0]

    背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅. 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的 ...

  4. ASP.NET 4.0尚未在 Web 服务器上注册 解决方法

    使用VS2010创建web应用程序时出现如下提示ASP.NET 4.0尚未在 Web 服务器上注册.为了使网站正确运行,可能需要手动将 Web 服务器配置为使用 ASP.NET 4.0,按 F1 可了 ...

  5. 使用私有Pod Spec的类库--提高公司开发效率

    前言 找了这么长时间,再次开始去尝试Cocoapods了.前面已经写过一篇关于如何把自己的Github上的代码库添加Cocoapods支持.现在就让我们看一下如果搭建私有的Spec吧. 之所以构建私有 ...

  6. 【开源】玩的就是开源 - DevFw

    http://www.cnblogs.com/newmin/ 最近真的爱上开源了,将自己7年积累下来的部分代码,发布成为一个项目:DevFw 项目如下: 项目名称 描述 仓库 AtNet.DevFw. ...

  7. C# .net dotnet属性定义属性，以提供显示明称，默认值

    //使用显示名称初始化 System.ComponentModel.DisplayNameAttribute 类的新实例. displayName 显示名称 [DisplayName("we ...

  8. maven工程模块化

    前言 项目的模块化有利于任务分工,后期维护,易扩展,模块还可以独立成服务单独部署等: 创建packaging类型为POM的父项目 我用的maven插件是m2e,相信大部分人在eclipse装的也是m2 ...

  9. Markdown：让书写更美好

    http://www.jianshu.com/p/17fdcf17bbb4 http://sdutlinux.org/t/218   文档整体解决方案 在自己的服务器上安装GitBook markdo ...

  10. Maven 的classifier的作用

    直接看一个例子,maven中要引入json包,于是使用了 <dependency> <groupId>net.sf.json-lib</groupId> <a ...