<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>选择器实现各行变色</title>

    <link href="../../CSS/2-2.css" rel="stylesheet" />

    <script src="../../JQuery/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

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

        })

    </script>

</head>

<body>

<table id="tbStu">

  <tbody>

    <tr>

      <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>

    </tr>

    <tr>

      <td>1001</td><td>张小明</td><td>男</td><td>320</td>

    </tr>

    <tr>

      <td>1002</td><td>李明琪</td><td>女</td><td>350</td>

    </tr>

  </tbody>

</table>

</body>

</html>

jQuery实现隔行变色的更多相关文章

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

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

  2. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

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

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

  4. jQuery特效 隔行变色

    1.通过使用onmouseover onmouseout方法 2.变色使用background-color(css)属性 3.变色的标签是td(tr仅仅能使用事件,颜色样式不起作用) 第一种方法 使用 ...

  5. jquery table 隔行变色+点谁谁变色

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

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

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

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

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

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

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

  9. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

随机推荐

  1. WebRTC手记之WebRtcVideoEngine2模块

    转载请注明出处:http://www.cnblogs.com/fangkm/p/4401143.html 终于讲到视频数据的编码发送模块了,不容易.总体来说也看了不少时间WebRTC的源码了,最大的感 ...

  2. POJ 3373 Changing Digits(DP)

    题目链接 记录路径的DP,看的别人的思路.自己写的也不好,时间居然2000+,中间的取余可以打个表,优化一下. 写的各种错,导致wa很多次,写了一下午,自己构造数据,终于发现了最后一个bug. dp[ ...

  3. [BZOJ 3759]Hungergame

    Nim游戏获胜的条件是所有石子的异或和为0 如果先手要获胜,那么一定是打开了一个异或和为0的极大子集 什么是极大子集呢? 就是无论后手打开任何子集的箱子,都不能再使此时打开的箱子异或和为0. 容易证明 ...

  4. Java学习第一步: Win7配置JDK环境

    转摘"专注JavaWeb开发":http://www.javaweb1024.com/java/Javajichu/2015/03/02/353.html 下载JDK并安装到本机  ...

  5. Odoo　ir value　分析

    源代码位置:openerp/addons/base/ir/ir_values.py _columns = { 'name': fields.char('Name', required=True), ' ...

  6. require(__DIR__ . "/../sss.php"

    魔法函数  __DIR__ 是 php5.2以后新加的函数,返回当前文件所在的目录,返回的目录不带 \,所以上边的意思是:Require当前目录的父目录中的 sss.php

  7. 【转】MySQL数据库原理

    原文地址:http://www.cnblogs.com/qiuyi116/p/4349233.html 我们知道,数据是信息的载体——一种我们约定了如何解释的符号.在计算机系统中,最常见的应该是文本数 ...

  8. Web 在线文件管理器学习笔记与总结（2）显示文件列表（名称，类型，大小，可读，可写，可执行，创建时间，修改时间，访问时间）

    主要函数: filetype() 判断文件类型 filesize() 得到文件大小(字节) is_readable() 判断文件是否可读 is_writeable() 判断文件是否可写 is_exec ...

  9. 自动更新开奖数据的excel文件，供大家下载

    自动更新开奖数据的excel文件,供大家下载 2010-03-14 20:22 228492人阅读打印来源:乐彩网 作者:eren 很多人拥有自制excel电子表格,常要更新最基本的开奖信息.如有多期 ...

  10. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...