<!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. 【转】浅谈多核CPU、多线程、多进程

    浅谈多核CPU.多线程.多进程 1.CPU发展趋势 核心数目依旧会越来越多,依据摩尔定律,由于单个核心性能提升有着严重的瓶颈问题,普通的桌面PC有望在2017年末2018年初达到24核心(或者16核3 ...

  2. AlphaGo GITHUB

    AlphaGo GITHUB https://github.com/Rochester-NRT/AlphaGo

  3. 规划设计系列3 | SketchUp+实景三维，方案现状一起看

    将SketchUp中建立的模型与实景三维模型进行集成,既可以充分发挥实景三维在地理空间记录方面的优势,又可以去除SketchUp在周边环境设计上的不足. 同时借助Wish3D Earth丰富的场景浏览 ...

  4. 卷积 convolution

    这东西大学学过,然后我忘记了,后来就只记得这个名字了. https://zh.wikipedia.org/wiki/%E5%8D%B7%E7%A7%AF http://www.guokr.com/po ...

  5. java基础篇6之代理

    代理的概念与应用 Class clazzProxy = Proxy.getProxyClass(Collection.class.getClassLoader,Collection.class); c ...

  6. 【Salvation】——怪物角色动画&主角碰撞死亡动画

    写在前面:这个动画功能同样也是使用JavaScript编写脚本,在Unity3D游戏引擎的环境中实现,在怪物的角色动画中,很多与人物相同,这里不再重复. 一.设计敌人 拖一个精英sprite到层次面板 ...

  7. Android之——流量管理程序演示样例

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47680811 眼下.市面上有非常多管理手机流量的软件,能够让用户实时获取到自己手机 ...

  8. 内网ip打洞-----p2p实现原理

    网上找了非常多.代码大堆,原理讲清楚透彻的不多. 本人找几篇讲得好的来整理一下. 一片技术文章,最基本的讲清楚原理.假设再有完整的能执行的源码也可,关键是要把核心部分代码分析清楚. (1)问题的由来: ...

  9. require.js 使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. maven springmvc-hibernate搭建以及源码下载

    见:https://blog.csdn.net/fengshizty/article/details/43635305 下载源码参见:http://www.cnblogs.com/ljy2013/p/ ...