效果图

实现代码：

通过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. line-height行高与图片的隐匿文本间隙消除方法

    (标注 文章来源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-hei ...

  2. js 模块化的一些理解和es6模块化学习

    模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理  5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...

  3. 带你使用h5开发移动端小游戏

    带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...

  4. IIS10中使用OpenSSL来创建CA并且签发SSL证书

    参考: http://www.cnblogs.com/lierle/p/5140187.html http://alvinhu.com/blog/2013/06/12/creating-a-certi ...

  5. sharepoint报HRESULT:0x80131904的错误的原因和解决方法

    在新建文件库的时候出现的.下上传文件和更改权限,都是在报这个HRESULT:0x80131904的错误,基本所有操作都报同一个错误,如下图: 错误原因 这个问题其实就是:sharepoint配置文件( ...

  6. 支付宝alipay使用小结 调用支付宝程序被杀死说明

    一. 准备阶段 如果没有蚂蚁金服开放平台的注册账号,则需要实现注册一个,这里多说一点,就是当我们以公司名义注册账号时,需要预备公司的营业执照等物品(需要上传照片等信息审核).账号申请成功之后,我们需要 ...

  7. android studio 导入项目太慢(卡条)

    原因: 下载的项目和你当前已经下载的grandle 不一致, 导致导入的时候到网上下载相应的版本. 最简单的办法,修改你这个需要导入的项目. 需要修改的文件: 1. xxx-project/.idea ...

  8. iOS开发之XCode设置--消除AFN的警告

    本篇是直接拷贝别人的博文,地址:http://blog.csdn.net/liyiyismile/article/details/50434844 在项目开发中导入第三方sdk后会提示很多这样的错误: ...

  9. Mybatis基于注解的方式访问数据库

    1. 使用方式:在Service层直接调用 package com.disappearwind.service; import org.springframework.beans.factory.an ...

  10. 页面之间传值方式的总结,五种方式,通知,block,代理,单例,NSUERDEFALUT,

    首先代码拿上 1:单例 2:通知 3:代理 4:block方法 5:NSUSERDEFAULT(沙盒文件) 先是单例类: .h文件 @interface DataSource : NSObject @ ...