<!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. This function has none of DETERMINISTIC, NO SQL 解决办法

    在恢复mysql数据库时提示 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its decl ...

  2. object-c 协议和委托

    协议相当于接口 委托相当于帮助实现其它类的功能 object-c提供的协议机制,一个类可以实现多个协议,从而感觉上像多继承一样

  3. Bestcoder Round# 80

    [1003 Sequence] 指数循环节,注意a mod p = 0的情况.此时你的循环节如果返回0,这时你会输出1,而实际上应该是0 #include <algorithm> #inc ...

  4. Linux_使用Linux之安装jdk 7

    工具/原料 jdk7源码安装压缩包 方法/步骤   卸载OpenJDK rpm -qa | grep java rpm -e --nodeps java-1.6.0-openjdk-1.6.0.0-1 ...

  5. Servlet连接数据库及日期格式转换

    package oracleFactory; import java.io.IOException; import java.io.PrintWriter; import java.sql.Conne ...

  6. java---相亲练习

    public class wu{ public static void main(String[] args){ //TODO 自动生成的方法存根 int a = 0,b = 0,c = 0; int ...

  7. IO的生命周期

    ● 将来自cache的数据封装成bio submit_bh->submit_bh_wbc 此时IO还在fs层 ● 进入block IO层 submit_bh_wbc->submit_io- ...

  8. A trip through the Graphics Pipeline 2011_03

    At this point, we’ve sent draw calls down from our app all the way through various driver layers and ...

  9. Javascript 判断一个数字是否含有小数点

    JavaScript 判断一个数字是否含有小数点,如果含有,则返回该数字:如果不含小数点,则小数点后保留两位有效数字: function hasDot(num){ if(!isNaN(num)){ r ...

  10. Javascript 笔记与总结（1-2）词法分析

    词法分析,按顺序分析 3 样: 第 1 步:先分析参数 第 2 步:再分析变量声明 第 3 步:再分析函数声明 一个函数能使用的局部变量,就从上面 3 步分析而来. 具体步骤: 0:函数运行前的瞬间, ...