<!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. pptpvpn 连接后 无法上外网

    VPN拨号后只能连内网,不能上外网的原因和解决方法 因为众所周知的原因,很多个人或者单位需要架设自己的VPN.会遇到一些奇怪的情况,比如说:为什么连上单位的VPN后就只好上公司的内网(局域网),外网( ...

  2. 迭代字典中的key和value

    字典是python中十分重要的一个内容. 今天我们来谈谈,在一个 for 循环中,能否同时迭代 key和value?当然可以咯. dict 对象的 items() 方法返回的值: >>&g ...

  3. Linux环境搭建-在虚拟机中安装Centos7.0

    最近在空闲时间学习Linux环境中各种服务的安装与配置,都属于入门级别的,这里把所有的学习过程记录下来,和大家一起分享. 我的电脑系统是win7,所以我需要在win7上安装一个虚拟机-VMware,然 ...

  4. 项目游戏开发日记 No.0x000005

    14软二杨近星(2014551622) 还有一周就要交项目了, 看着周围的人也都忙碌了起来, 看着大部分人的项目都已经初具容貌, 我们团队里面也搞得人心惶惶, 一来是, 时间不多了, 还有很多事情要做 ...

  5. 《使用Hibernate开发租房系统》内部测试笔试题

    笔试总结 1．在Hibernate中,以下关于主键生成器说法错误的是( C). A．increment可以用于类型为long.short或byte的主键 B．identity用于如SQL Server ...

  6. 绘制扇形效果线条小Bug解决

    绘制线条基本代码: 变量: CPoint m_ptOrigin;//起点坐标 bool m_bTrue;//检查鼠标左键是否按下 CPoint m_ptOldOrigin;//记录上一次绘制终点坐标, ...

  7. 初识redis数据类型

    初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...

  8. Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

    怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’.这篇文章将简单阐述这两种模式之间的差异. 译注:一个 ...

  9. [LeetCode] Design Tic-Tac-Toe 设计井字棋游戏

    Design a Tic-tac-toe game that is played between two players on a n x n grid. You may assume the fol ...

  10. [LeetCode] Palindrome Permutation 回文全排列

    Given a string, determine if a permutation of the string could form a palindrome. For example," ...