效果图

实现代码：

通过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. MVC数据传递

    一.数据传递 1.ViewData[]: 用法:action中:ViewData["key"]="aaa";,V层接收ViewData["key&qu ...

  2. jQuery实现checkbox反选(转载)

    //反选 $("#btnInvert").click(function () { //1.方法一实现反选 $("#chk input:checkbox").ea ...

  3. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  4. app上架流程的整理

    app的上架流程 一．准备工作 首先需要有开发者账号,企业级的账号是299$,个人开发者账号是99$,没有的话可以登录http://developer.apple.com/自行申请 假如你已经有账号了 ...

  5. Android Studio 快捷键一览

    刚从 eclipse 转到 android studio 的同学,编写代码时使用的快捷键不同,一时难以适应,当然可以通过设置,将快捷键模板设置成与 eclipse 相同的,但我个人不赞成,因为 And ...

  6. idea使用优化常用快捷键设置

    1. 界面美观 1.1. 主题 1.2. 改Project面板大小 2. 快捷键 2.1智能提示 2.2常用快捷键 3.编辑器调整 3.1 代码提示忽略大小写 3.2 显示行号 3.3 优化自动导入 ...

  7. jdb - The Java Debugger

    jdb 是一个简单的命令行调试器,可以调试本地或远程 Java Virtual Machine. jdb [ options ] [ class ] [ arguments ] options 命令行 ...

  8. Nginx反向代理和负载均衡部署指南

    1.        安装 1)         从Nginx官网下载页面(http://nginx.org/en/download.html)下载Nginx最新版本(目前是1.5.13版本)安装包: ...

  9. Nagios学习实践系列——基本安装篇

    开篇介绍 最近由于工作需要,学习研究了一下Nagios的安装.配置.使用,关于Nagios的介绍,可以参考我上篇随笔Nagios学习实践系列——产品介绍篇 实验环境 操作系统:Red Hat Ente ...

  10. SQL Server Reporting Services：无法检索应用程序文件。部署中的文件已损坏

    如果在客户端计算机上启动Microsoft SQL Server 2012的 ClickOnce 版本的 Microsoft SQL Server 报表生成器时出现"无法检索应用程序文件.部 ...