<!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. codeigniter 使用

    CodeIgniter系列 记录count和分页 对于某个表的不带条件的count,可以简单的用 $total = $this->db->count_all($table_name) 来获 ...

  2. Jenkins+ProGet+Windows Batch搭建全自动的内部包（NuGet）打包和推送及管理平台

    这一篇文章是继http://www.cnblogs.com/EasonJim/p/5954155.html的升级版,由于CCNET已经过时,所以我把打包过程的CCNET工具换成Jenkins去实现,批 ...

  3. 关于Android方法数量限制的问题

    限制Android方法数量的原因是: Android应用以DEX文件的形式存储字节码文件,在Dalvik字节码规范里,方法引用索引method referenceindex只有16位,即65536个. ...

  4. mysql count(*) 和count(1)区别

    count *更快, 不要加where,否则同count(1)效率相同 sql语句对大小写不敏感,关键字一般大写,其他小写, count(*)不加where,mysql会直接返回总条数,因为mysql ...

  5. JS: document.getElementBy(), setInerval()

    ylbtech-JavaScript-DOM document.getElementBy(),setInerval() 1.A,document.getElementBy()返回顶部 document ...

  6. 【Salvation】—— 项目策划&市场分析

    写在前面:这个项目是2017年,我们评选校级创新基金项目的参加作品,小组4人,我为负责人,这个项目现在已经基本完成,目前处于后期收尾阶段. 一.项目的目标.内容及创新之处 1.研究目标 体现人类与自然 ...

  7. 2016.6.21 maven：Failure to transfer ... from ....

    问题描述: 才刚新建的工程,什么都没做,就显示pom.xml有问题,在第一行的标签上 有如下错误: 点击详情: Failure to transfer org.apache.maven:maven-p ...

  8. 从头认识java-14.2 进一步了解数组

    这一章节我们来全面了解一下数组. 1.数组在初始化之前.我们不能使用他的引用来做不论什么事情. package com.ray.ch14; public class Test { public sta ...

  9. hdu2955 Robberies （01背包）

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=2955">http://acm.hdu.edu.cn/showproblem.php ...

  10. TP5结合聚合数据API查询天气

    php根据城市查询天气情况看到有人分享java的查询全国天气情况的代码,于是我想分享一个php版本的查询天气接口.免费查询天气的接口有很多,比如百度的apistore的天气api接口,我本来想采用这个 ...