效果图

实现代码：

通过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. 【grunt整合版】30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  2. 熟悉vs2012IDE

    使用vs2012已经几个月了,深感对开发环境的学习有助于提高开发的效率.现将我的经验总结如下: 一.搜索 vs2012相比vs2010添加了正则搜索,极大的提高了代码的查询效率. 二.重构 同vs20 ...

  3. jQuery静态方法parseXML使用和源码分析

    jQuery.parseXML( data ) 接受一个格式良好的 XML 字符串,返回解析后的 XML 文档. 方法 jQuery.parseXML() 使用浏览器原生的 XML 解析函数实现. 在 ...

  4. 一点惊喜 --- alert()函数

    在JavaScript代码中,可以使用window对象的alert()函数来显示一段文本,从而进行程序的调试,或者向用户警示相关信息: window.alert("sample text&q ...

  5. ORACLE 12C新特性——CDB与PDB

    Oracle 12C引入了CDB与PDB的新特性,在ORACLE 12C数据库引入的多租用户环境(Multitenant Environment)中,允许一个数据库容器(CDB)承载多个可插拔数据库( ...

  6. 不同环境下文件上传Uncaught SyntaxError: Unexpected end of input

    很奇怪的问题,相同的代码和相同的数据,在两台linux服务器上执行文件上传,一台正常上传,一台在ftl页面 报:Uncaught SyntaxError: Unexpected end of inpu ...

  7. log4net 自定义Layout日志字段

    最近在使用log4net的时候有一个简单的需求,就是自定义个格式化输出符.这个输出符是专门用来帮我记录下业务ID.业务类型的.比如,“businessID:328593,businessType: o ...

  8. Spring配置JNDI和通过JNDI获取DataSource

    一.SpringJNDI数据源配置信息 <bean id="dataSource" class="org.springframework.jndi.JndiObje ...

  9. Cloudera5.8.3 HBase1.2.0开发必须的jar包

    Cloudera的HBase开发环境下载依赖包特别麻烦,通常是直接在CDH服务器上拷.

  10. sizeof

    一.sizeof使用的场合: 1.sizeof操作符的一个主要用途是与存储分配和I/O系统那样的例程进行通信.例如: void* malloc(size_t size); size_t fread(v ...