<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name='description' content='表格的高级应用'>

    <title>表格的高级应用</title>

    <script src="../jquery.js"></script>

    <script>

        window.onload = function () {

            var oTab = document.getElementById('tab1');

            for (var i=0; i<oTab.tBodies[0].rows.length; i++){

                if(i%2){

                    oTab.tBodies[0].rows[i].style.background='red';

                }else {

                    oTab.tBodies[0].rows[i].style.background='green';

                }

            }

        }

    </script>

</head>

<body>

<table id="tab1" border='1' width="500px">

    <thead>

        <tr>

            <td>ID</td>

            <td>gender</td>

            <td>name</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>01</td>

            <td>male</td>

            <td>John</td>

        </tr>

        <tr>

            <td>02</td>

            <td>female</td>

            <td>Ann</td>

        </tr>

        <tr>

            <td>03</td>

            <td>female</td>

            <td>Merry</td>

        </tr>

        <tr>

            <td>04</td>

            <td>female</td>

            <td>Jessis</td>

        </tr>

        <tr>

            <td>05</td>

            <td>male</td>

            <td>Jack</td>

        </tr>

        <tr>

            <td>ID</td>

            <td>男</td>

            <td>Apollo</td>

        </tr>

    </tbody>

</table>

</body>

</html>

table表格隔行变色的更多相关文章

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

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

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

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

  3. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  5. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  6. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

  9. jQuery 表格隔行变色插件

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

随机推荐

  1. php中int类型在不同平台所占不同字节数理解

    1.在不同平台上占字节数与最大值 在32位平台上int占4个字节,在64位平台上int占8个字节,PHP_INT_SIZE 在32位平台上int的最大值2^31 - 1,在64位平台上int最大值2^ ...

  2. CLI/C++中混合类的使用【转】

    http://www.cppblog.com/mzty/archive/2007/12/24/39517.html CLI/C++中混合类的使用 一 混合类 所谓混合类是指CLI/C++中native ...

  3. HDU2550 百步穿杨

    百步穿杨 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. 2016.7.5 如何在maven中添加所需依赖（只知道jar包的部分名字的情况）

    (1)进入官网仓库 http://mvnrepository.com/ (2)输入需要的jar包名 比如这里的jota-time (3)寻找需要的版本,并选取需要的版本 (4)复制需要的maven依赖 ...

  5. 2016.7.12 eclispe使用mybatis generator生成代码时提示project E is not exist

    运行mybatis-generator之后,出现错误:project E is not exist   错误原因:使用了项目的绝对路径. http://bbs.csdn.net/topics/3914 ...

  6. awstats的安装和配置

    一.Awstats简介Awstats是一个免费非常简洁而且强大有个性的网站日志分析工具.它可以统计您站点的如下信息:一:访问量,访问次数,页面浏览量,点击数,数据流量等二:精确到每月.每日.每小时的数 ...

  7. 指定UIView的某几个角为圆角

    如果需要将UIView的四个角全部设置为圆角,做法相当简单,只需要设置其layer的cornerRadius属性即可.而若要指定某几个角(小于4)为圆角,而别的角不变的时候,这种方法就不好用了.这种情 ...

  8. 基于pcl 和 liblas 库 las与pcd格式（rgb点）相互转换（win10 VS2013 X64环境 ）

    #include <liblas/liblas.hpp> #include <iomanip> #include <iostream> #include <s ...

  9. Struts2学习九----------处理结果类型（input）

    © 版权声明:本文为博主原创文章,转载请注明出处 Struts2处理结果类型 - SUCCESS:Action正确的执行完成,返回相应的视图,success是name属性的默认值 - ERROR:表示 ...

  10. SpringMvc自动代理

    自动配置的好处是不需要挨个 实现[org.springframework.aop.framework.ProxyFactoryBean] ,只需要 advisor 配置和 <bean id=&q ...