<!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. loj #100. 矩阵乘法

    题目描述 这是一道模板题. 分别给定 n×p n \times pn×p 和 p×m p \times mp×m 的两个矩阵 A AA 和 B BB,求 A×B A \times BA×B. 输入格式 ...

  2. Codeforces 869 C The Intriguing Obsession

    题目描述 — This is not playing but duty as allies of justice, Nii-chan! — Not allies but justice itself, ...

  3. hdu 4823 Energy Conversion 构造

    题目链接:HDU - 4823 魔法师百小度也有遇到难题的时候——现在,百小度正在一个古老的石门面前,石门上有一段古老的魔法文字,读懂这种魔法文字需要耗费大量的能量和大量的脑力.过了许久,百小度终于读 ...

  4. Linux基础学习1

    安装问题 随意下载的:CentOS-5.5-i386-LiveCD-Release2.iso Live CD 是可以直接运行在内存当中的,而不是安装镜像. 如之前玩过的BT5一样,把BT5-LiveC ...

  5. Working With Push Buttons In Oracle Forms

    Managing push buttons at run time in Oracle Forms is very simple and in this tutorial you will learn ...

  6. Cannot create JDBC driver of class '' for connect URL 'null'问题解决方法2

    1)启动Tomcat服务器,打开浏览器,输入http://localhost:8080/admin(其中localhost是名称服务器或称为主机),进入管理界面的登陆页面,这时候请输入原来安装时要求输 ...

  7. 使用virtualenv, uwsgi, nginx来布署django

    http://blog.csdn.net/lihao21/article/details/47731903 http://www.cnblogs.com/lxg226/p/3468558.html h ...

  8. 转： Gradle：Gradle入门

    from: http://blog.csdn.net/p106786860/article/details/50422463

  9. IDEA破解 2017 IDEA license server 激活（可用）

    进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.PHP(注意:php要小写)即可~

  10. 将Cocos2d-x游戏打包成Android应用程序

    1. 打开Eclipse(已经装好CDT.ADT和NDK),导入cocos2d-x的Android项目. 2. 导入后java的源码会出现编译错误,打开cocos2d-x引擎的根文件夹\cocos2d ...