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. [Locked] 3Sum Smaller

    3Sum Smaller Given an array of n integers nums and a target, find the number of index triplets i, j, ...

  2. 最长回文 HDU 3068 （裸的Manacher）

    直接看代码: ============================================================================================= ...

  3. [IE9] GPU硬件加速

      IE9 的一个重大改进就是使用了GPU硬件加速来渲染网页. 那么GPU硬件加速到底能够带来多大的性能提升? 你可以在IE的测试案例网站(http://ie.microsoft.com/testdr ...

  4. ubuntu忘记密码

    Do these two things just to make sure: mount -o remount,rw / This first part remounts the root parti ...

  5. WebService-通俗讲解

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  6. bzoj 3225: [Sdoi2008] 立方体覆盖 题解

    [原题] 3225: [Sdoi2008]立方体覆盖 Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 51  Solved: 36 [Submit][S ...

  7. iOS开发UI篇－懒加载、重写setter方法赋值

    一.懒加载 1.懒加载定义 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再 ...

  8. 体验Impress.js

    用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试. 关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一步 ...

  9. yii自动登陆的验证机制浅析

    一直在使用yii进行开发, 也知道如何去使用, 也仅仅是知道怎么去用罢了, 终归是没研究过源码, 心里发虚, 今天遇到一个问题, 关于自动登陆的问题. 要求就是, 修改登陆保存session天数为自定 ...

  10. 正则表达式中/i,/g,/ig,/gi,/m的区别和含义

    正则表达式中/i,/g,/ig,/gi,/m的区别和含义 /i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找.忽略大小写)/ig(全文查找.忽略大小写)