table 表格隔行换色实现

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

window.onload = function(){ //页面所有元素加载完毕

    var item  =  document.getElementById("tb");            //获取id为tb的元素(table)

    var tbody =  item.getElementsByTagName("tbody")[0];    //获取表格的第一个tbody元素

    var trs =   tbody.getElementsByTagName("tr");            //获取tbody元素下的所有tr元素

    for(var i=0;i < trs.length;i++){//循环tr元素

        if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)

            trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.

        }

    }

}

</script>

</head>

<body>

<table id="tb">

    <tbody>

        <tr><td>第一行</td><td>第一行</td></tr>

        <tr><td>第二行</td><td>第二行</td></tr>

        <tr><td>第三行</td><td>第三行</td></tr>

        <tr><td>第四行</td><td>第四行</td></tr>

        <tr><td>第五行</td><td>第五行</td></tr>

        <tr><td>第六行</td><td>第六行</td></tr>

    </tbody>

</table>

</body>

</html>

table 表格隔行换色实现的更多相关文章

  1. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  3. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  5. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  6. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  7. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  8. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  9. js表格隔行换色和hover效果

    <!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...

随机推荐

  1. Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖

    1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 ...

  2. 数据结构算法集---C++语言实现

    //数据结构算法集---C++语言实现 //各种类都使用模版设计,可以对各种数据类型操作(整形,字符,浮点) /////////////////////////// // // // 堆栈数据结构 s ...

  3. C++程序原码

    直接插入排序基本算法 #include<iostream.h> #include<stdlib.h> #include<time.h> const int n=10 ...

  4. 《程序设计中的组合数学》——polya计数

    我们在高中的组合数学中常常会碰到有关涂色的问题,例如:用红蓝两种颜色给正方形的四个顶点涂色,会有几种不同的方案.在当时,我们下意识的认为,正方形的四个顶点是各不相同的,即正方形是固定的.而实际上我们知 ...

  5. redis linux 基本命令

    找到一个哥们 写的都是一步步打基础的学习东西 不光是知识也是学习方式 都值得学习.. reids 传送们-->> http://xuelianbobo.iteye.com/category ...

  6. ScheduledExecutorService定时周期运行指定的任务

    一:简单说明 ScheduleExecutorService接口中有四个重要的方法,当中scheduleAtFixedRate和scheduleWithFixedDelay在实现定时程序时比較方便. ...

  7. SQL 约束解说

    SQL 约束解说 2009-04-27 09:29 约束主要包含: NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY CHECK DEFAULT 1.not null : ...

  8. Android（java）学习笔记248：ContentProvider使用之虚拟短信

    1.虚拟短信应用场景:   急着脱身?应付老婆(老公.男女朋友查岗)?   使用虚拟通话短信吧.您只需通过简单设置,软件就会在指定时间会模拟一个“真实”来电或短信来迷惑对方,通过“真实”的证据让对方相 ...

  9. BestCoder冠军赛 - 1009 Exploration 【Tarjan+并查集缩点】

    [题意] 给一个图,这个图中既有有向边,又有无向边,每条边只能走一次,问图中是否存在环. 最多10^6个点,10^6个无向边,10^6个有向边 [题解] 因为既有有向边又有无向边,所以不能单纯的用ta ...

  10. vsftp配置主动模式和被动模式

    配置文件:/etc/vsftpd/vsftpd.conf 主动模式配置方法: 主动式连接使用的数据通道 connect_from_port_20=YES 支持数据流的被动式连接模式 pasv_enab ...