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. Computer Vision Algorithm Implementations

    Participate in Reproducible Research General Image Processing OpenCV (C/C++ code, BSD lic) Image man ...

  2. 数学概念——I - 数论，线性方程

    I - 数论,线性方程 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit  ...

  3. 手机app

    手机app是什么? 由于iPhone.三星等智能手机的逐步流行和广泛普及,手机app这个词语开始频繁的出现在广大手机网民的视线中.也许你们还不知道什么是手机app,但你一定下载过手机app,你的手机里 ...

  4. 实现一个servlet的helloworld小程序（不适用Eclipse）

    实现一个servlet的helloworld小程序(不适用Eclipse) 1. 在tomcat中的webapps下建一个应用程序FirstServlet(C:\tomcat\webapps\Firs ...

  5. SpringMVC之json数据传递

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...

  6. Android中为图标加上数字--用于未读短信数提醒，待更新应用数提醒等

    本文属于原创,转载请著名出处:http://flysnow.iteye.com/blog/906770 写道 在我们开发一些如短消息.应用商店等应用时,会考虑在短消息的图标上加上未读短信的数量,在应用 ...

  7. 安卓扫码：简单的ZXing使用记录

    ZXing是Google提供的条形码.二维码等的生成.解析的库.最近工作需求去研究了一下,主要是研究怎么扫描二维码(QRCode).网上教程也不少,但大多看了不明所以,甚至看了半天都不知道解码到底从哪 ...

  8. Android 系统移植与驱动开发--第二章搭建Android环境核心步骤及心得

    第二章 搭建Android 开发环境 虽然在这一章中讲的是Android底层开发环境,但是相应伴随的还有Android NDK程序来测试Linux驱动,HAL程序库.底层开发不仅需要交叉编译环境,还要 ...

  9. Dedecms调用文章发布时间的方法

    在织梦系统中,有时候需要调用文章发布的时间,格式不同,代码不同.现总结织梦系统dedecms调用文章发布时间的几种方法.   11-20 样式 ([field:pubdate function='st ...

  10. java.lang.ClassCastException

    是指类型转换出错 当前者的域小于后者的时候出现 譬如说:前者A是子类的对象,而后者B是父类的对象 若使用A = B;就会抛出java.lang.ClassCastException List<C ...