<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             /*window.onload = function() {

                 var item = document.getElementById("tb");

                 var tbody = document.getElementsByTagName("tbody");错误

                 var trs =   tbody.getElementsByTagName("tr");

                 for(var i = 0; i < trs.length; i++) {

                     if(i%2==0){

                         trs[i].style.backgroundColor="greenyellow";

                     }

                 }

             };*/

             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>

JavaScript例子2-使一个特定的表格隔行变色的更多相关文章

  1. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  2. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  3. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

  4. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

  5. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  6. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  7. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  8. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

随机推荐

  1. 空指针/0/NULL

    空指针/0/NULL 空指针是一个被赋值为0的指针,在没有被具体初始化之前,其值为0. NULL 是一个标准规定的宏定义,用来表示空指针常量. #define NULL 0   或者 #define ...

  2. linux下如何映射宿主机中的文件到容器中?

    答:在启动容器时使用-v指定宿主机目录和要映射到的容器内部目录,语法如下: docker run -it -v <host_dir>:<container_dir> <c ...

  3. 网站title，meta，description如何设置，长度大小多少合适！

    转自:http://www.os1010.com/archives/1682 如 何 把 握 html 网 页 中 的 meta 标 签 对于高级的搜索引擎来说,html 的meta 标签并不是什么新 ...

  4. AngularJS 指令（Directivce ）一

    指令(Directive),是AngularJS中一块比较重要的内容,在实践中,我们提倡将控制器(Controller)写得短小精悍,逻辑代码尽量少,要实现这种目的,我们主要通过将逻辑代码抽取到服务( ...

  5. coreDNS域名无法解析问题

    问题: 在pod内无法解析域名 解决: busybox的镜像有bug,导致ping可以解析,但是nslookup无法解析 kubectl run -it --rm --image=infoblox/d ...

  6. 3. Linux文件系统

    什么是文件系统 A directory structure contained within a disk drive or disk area(文件系统是包括在一个磁盘或分区的目录结构) A met ...

  7. 前台请求响应json

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. @Transactional事务总结

    一:加了注解@Transactional就能起作用的原理总结: 1:首先是由类:JdkDynamicAopProxy,在invoke方法里面创建动态代理类,同时由拦截类进行拦截,代码如下所示: Lis ...

  9. 今盒子里有n个小球，A、B两人轮流从盒中取球，每个人都可以看到另一个人取了多少个

    /* 题目描述 今盒子里有n个小球,A.B两人轮流从盒中取球,每个人都可以看到另一个人取了多少个,也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定: 每个人从盒子中取出的球 ...

  10. ABP领域层定义仓储并实现

    原文作者:圣杰 原文地址:ABP入门系列(3)——领域层定义仓储并实现 在原文作者上进行改正,适配ABP新版本.内容相同 一.先来介绍下仓储 仓储(Repository): 仓储用来操作数据库进行数据 ...