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. 数据结构——Currency System in Geraldion

    题目: Description A magic island Geraldion, where Gerald lives, has its own currency system. It uses b ...

  2. 尚学堂 JAVA DAY12 概念总结

    面向过程和面向对象的区别.(5 分)面向过程就好像:一位父亲吩咐自己8岁的小儿子去买啤酒.他需要考虑儿子从出门后的每一个步骤,叮嘱儿子出门怎么走,如何过马路,到了超市如何找到酒水区,怎么识别需要的品牌 ...

  3. N - Find a way

    这个专题的最后一道题目了.... 应该说的是有两个人计划去KFC碰头,找出来一个最近的KFC让他们俩见面吧,应该是个比较容易的问题,不过需要注意在一个Bfs里面搜的话,别把两个人弄混乱了....... ...

  4. docker安装lnmp 环境

    docker基础知识请转 docker中文文档:http://docker-doc.readthedocs.io/zh_CN/latest/index.html docker英文文档: https:/ ...

  5. 【sql进阶】SQL Server 将某一列的值拼接成字符串

    今天在统计报表的时候有这么一个需求,将一列字符串拼接成一行,然后展示到新的列中. 每一项的服务列表如下: 最终想要的结果是 sql如下: select AuxTypeName + ',' from ( ...

  6. EF 5.0 和 EF4.0 语法区别

    // 实现对数据库的添加功能,添加实现EF框架的引用 40 41 public T AddEntity(T entity) 42 43 { 44 45 //EF4.0的写法 添加实体 46 47 // ...

  7. [C++] [算法] KMP算法

    KMP串匹配算法是一个经典的算法. 传统BF算法是传统的字符串匹配算法.很好理解.叶实现.但时间复杂度太高. 本文将从字符串模式字符串被称为.为了匹配字符串被称为主弦. KMP配时能够少移动从串的位置 ...

  8. android开发launcher

    1. launcher是桌面应用程序 一. android.intent.category.LAUNCHER与android.intent.category.HOME的差别?      android ...

  9. Swift: 类与结构体

    对比类与结构体 类与结构体有许多的相同点,它们都可以: 定义属性来存储值: 定义方法来提供功能: 定义下标操作: 定义初始化函数: 扩展它的默认的实现: 遵从协议: 类有一些额外的能力,但是结构体没有 ...

  10. Android -- 利用Broadcast开启Service(转)

    Broadcast和Service都是Android四大组建之一的. 这里的广播是动态的,自己注册的一个广播. 这种最典型的用法就是利用开机广播,然后再起自己的服务,也就是在Android手机中做到开 ...