<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>隔行变色</title>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <style type="text/css">

        body {

            font-size: 12px;

            text-align: center;

        }

        #tbStu {

            width: 260px;

            border: solid 1px #;

            background-color: #eee;

        }

            #tbStu tr {

                line-height: 23px;

            }

                #tbStu tr th {

                    background-color: #ccc;

                    color: #fff;

                }

            #tbStu .trOdd {

                background-color: #fff;

            }

    </style>

    <script type="text/javascript">

        $(function () {

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

        })

    </script>

</head>

<body>

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

        <tbody>

            <tr>

                <th>学号</th>

                <th>姓名</th>

                <th>性别</th>

                <th>总分</th>

            </tr>

            <tr>

                <td></td>

                <td>张晓明</td>

                <td>男</td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td>李明启</td>

                <td>女</td>

                <td></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

这是css 样式的网址: http://www.w3school.com.cn/cssref/selector_nth-child.asp

jQuery知识点二 实现隔行变色的更多相关文章

  1. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

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

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

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

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

  4. Jquery 组 tbale表格隔行变色

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

  5. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  6. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  7. jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  8. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

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

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

随机推荐

  1. EF里查看/修改实体的当前值、原始值和数据库值以及重写SaveChanges方法记录实体状态

    本文目录 查看实体当前.原始和数据库值:DbEntityEntry 查看实体的某个属性值:GetValue<TValue>方法 拷贝DbPropertyValues到实体:ToObject ...

  2. rsync同步

    本地同步: rsync -avz /boot /test C/S架构: 远程同步:rsync+ssh 远程浏览器目录文件:rsync  用户@192.168.0.250:/boot 下行:rsync ...

  3. MPI-2 并行IO的使用方法

    写的MPI程序需要用到并行IO来操作文件,但是搜遍了度娘都没有找到多少关于并行IO函数的使用方法.最后在知网搜到了一些有用的论文,看了一下,感觉豁然开朗. MPI-1对文件的操作是使用绑定语言的函数调 ...

  4. Oracle创建用户设置权限

    (转:http://www.cnblogs.com/yangy608/archive/2011/08/22/2148893.html) create user TEST identified by & ...

  5. JSON-RPC 2.0 规范中文文档

    链接地址如下 http://wiki.geekdream.com/Specification/json-rpc_2.0.html

  6. 嵌入式Linux驱动学习之路(二十七)字符设备驱动的另一种写法

    之前讲的字符设备驱动程序,只要有一个主设备号,那么次设备号无论是什么都会和同一个 struct file_operations 结构体对应. 而本节课讲的是如何在设备号相同的情况下,让不同的次设备号对 ...

  7. python框架之django

    python框架之django 本节内容 web框架 mvc和mtv模式 django流程和命令 django URL django views django temple django models ...

  8. 使用Guid做主键和int做主键性能比较

    使用Guid做主键和int做主键性能比较 在数据库的设计中我们常常用Guid或int来做主键,根据所学的知识一直感觉int做主键效率要高,但没有做仔细的测试无法 说明道理.碰巧今天在数据库的优化过程中 ...

  9. 基于centos的lnmp搭建

    部署lnmp环境 安装配置mariadb配置php配置phpmyadmin配置php-fpm配置nginx配置测试 LNMP(linux,nginx,mariadb,php)部署,以下默认在root权 ...

  10. 贝塔阶段html及pdf模块测试

    这次虽然工作内容是将c#的html及pdf处理程序移植到java中,但是由于重新编写代码使得先前的工作成果得不到利用,于是将其编写为dll,再在java端调用. 这使得在java端即便每个分支都到达, ...