<!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. monkey命令选项参考

    基本参数:     --help              打印帮助消息 -v  可以在命令行中出现多次,每次一个-V选项都会增加monkey向命令行打印输出的详细级别.默认的级别0只会打印启动信息. ...

  2. CentOS 7 x64下Apache+MySQL(Mariadb)+PHP56的安装

    每次搭建新服务器,都要来来回回把这些包再装一下,来来回回搞了不下20遍了吧,原来都是凭经验,配置过程中重复入坑是难免的,故写此文做个备忘.虽然有像xampp这样的集成包,但是在生产环境的Linux发行 ...

  3. Linux 查看命令源码

    一.简介 有时候想看看ls.cat.more等命令的源代码,本文介绍相应查看方法. 二.方法 参考: http://blog.csdn.net/silentpebble/article/details ...

  4. 例解 Linux cd 命令

    cd 命令是 *nix 系统中最基本的命令,它所做的事情是改变你当前所在的目录.本文详细介绍该命令,它所能完成的功能以及关于该命令内在的东西. cd 命令:一个内置命令 BASH Shell 是大多 ...

  5. easy_UI 投票列表

    首先我们考虑一下在项目投票种用到的属性(ID,投票标题,备选项目,参与人数) entity package cn.entity; public class GridNode { private Lon ...

  6. angularJS（4）

    angularJS(4) 一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScr ...

  7. [No0000A2]“原始印欧语”（PIE）听起来是什么样子？

    "Faux Amis"节目中经常提到"原始印欧语"(PIE)——"Proto-Indo-European". 我们说过,英语,法语中的&qu ...

  8. 关于EventEmitter的用法

    EventEmitter的基本用法: var EventEmitter = require("events").EventEmitter; var ee = new EventEm ...

  9. React反模式 —— 如何不使用JSX地动态显示组件

    欢迎指导与讨论 : ) 前言 文章的最后能写出以 Modal.open( ) 这种调用形式,动态显示React对话框组件的写法(类似于ant design),同时涉及数据交互(数据能异步地返回给调用者 ...

  10. 移动端web开发，click touch tap区别

    转自: http://blog.csdn.net/sly94/article/details/51701188 移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击 ...