<!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. HTML5全屏(Fullscreen)API详细介绍

    // 整个页面 onclick=   launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.get ...

  2. 史上最全QC学习方案，值得收藏！

    Quality Center是一个基于Web的强大的测试管理工具,可以组织和管理应用程序测试流程的所有阶段,**制定测试需求.计划测试.执行测试和跟踪缺陷.此外,通过Quality Center还可以 ...

  3. Jmeter+TCP\Scoket(8583)报文压力测试

    Jmeter一般被用来测试HTTP协议,我第一次拿来测试socket协议,pos机传输报文为8583,协议属于socket,也是TCP协议的一种,网上有LR怎么测试8583报文,我就研究了一下怎么用J ...

  4. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  5. 利用线上数据验证系统 Gor

    Web 应用性能和压力测试工具 Gor - 运维生存时间 http://hao.jobbole.com/gorhttp/ 要使用线上引流到测试环境的作用,需要做到以下几点: 1.新搭建一套测试环境,连 ...

  6. 理解HTML语义化

    1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...

  7. [LeetCode] Sequence Reconstruction 序列重建

    Check whether the original sequence org can be uniquely reconstructed from the sequences in seqs. Th ...

  8. ping环回地址和ping主机地址的区别

    ping127.0.0.1和ping本机的过程是不一样的ip输出函数先检查地址是不是环回地址1.如果是环回地址 直接交给环回驱动程序处理 返回ip输入函数2.如果不是环回地址 检查是不是广播或者多播地 ...

  9. Stack的三种含义

    作者: 阮一峰 日期: 2013年11月29日 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈". 理解这个概念,对于理解程序的运行至关重要.容易混淆的是,这个词 ...

  10. sql语句-备忘

    -- 清空全部数据,不写日志,不可恢复,速度极快truncate table 表名; -- 清空全部数据,写日志,数据可恢复,速度慢delete from 表名;   --从一个数据库复制一张表带另一 ...