<!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. JSOI 2009 BZOJ 1444 有趣的游戏

    题面 题目描述 小阳阳发明了一个有趣的游戏:有n个玩家,每一个玩家均有一个长度为 l 的字母序列,任何两个玩家的字母序列不同.共有m种不同的字母,所有的字母序列都由这m种字母构成,为了方便,我们取大写 ...

  2. 从客户端(ExportContent="...ontinuous <br />Pass Count":13...")中检测到有潜在危险的 Request.Form 值。

    mvc中,用chrome浏览器导出excel提示如题错误的解决办法. <system.web> <httpRuntime requestValidationMode="2. ...

  3. tomcat 登录时用户名和密码问题

    在编程的时候我们经常在myeclipes中直接部署web程序,大多数情况下不会登陆tomcat,这样时间长了我们就忘记了tomcat的登陆用户名和密码,下面就说一下怎么找到tomcat的用户名和密码吧 ...

  4. wxWidgets界面开发工具wxFormBuilder的使用

    wxFormBuilder 下载地址:http://download.csdn.net/detail/lsmallstop/7013401 安装完成后,打开wxFormBuilder,可以在左侧工程子 ...

  5. IntelliJ IDEA创建文件时自动填入作者时间 定制格式

    IntelliJ IDEA创建文件时自动填入作者时间 定制格式 学习了:https://blog.csdn.net/Hi_Boy_/article/details/78205483 学习了:http: ...

  6. 23. Spring Boot启动加载数据CommandLineRunner【从零开始学Spring Boot】

    转:http://blog.csdn.net/linxingliang/article/details/52069503 实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求 ...

  7. 数据结构之---C语言实现图的数组（邻接矩阵）存储表示

    //图的数组(邻接矩阵)存储表示 #include <stdio.h> #include <stdlib.h> #define MAX_VEX_NUM 50 typedef c ...

  8. poj1649 Rescue(BFS+优先队列)

    Rescue Time Limit: 2 Seconds      Memory Limit: 65536 KB Angel was caught by the MOLIGPY! He was put ...

  9. 记录MySQL运行的SQL

    对照Oracle功能去学习Mysql总会发现亮点 Oracle中通过日志挖掘这一技能,能够找到以前运行过的全部记录: Mysql中也提供了3种方法{验证过的,我会记录详细做法} 方法1:{已验证} 记 ...

  10. Hadoop2.2.0-64位编译

    本作品由Man_华创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.基于http://www.cnblogs.com/manhua/上的作品创作. 实验环境:Ubunt ...