<!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. POJ3009-Curling 2.0（WA）

    POJ3009-Curling 2.0 题意: 要求把一个冰壶从起点“2”用最少的步数移动到终点“3” 其中0为移动区域,1为石头区域,冰壶一旦想着某个方向运动就不会停止,也不会改变方向(想想冰壶在冰 ...

  2. jwt扩展

    1.新建扩展类 package com.ireciting.uaaservice.config; import com.ireciting.uaaservice.pojo.TUser; import ...

  3. 使用pyinstaller 打包python程序

    1.打开PyCharm的Terminal,使用命令pip install pyinstaller安装pyinstaller 2.打包命令:pyinstaller --console --onefile ...

  4. 010-数据结构-树形结构-B树[B-树]

    一.概述 B 树就是常说的“B 减树(B- 树)”,又名平衡多路(即不止两个子树)查找树. 在计算机科学中,B树(英语:B-tree)是一种自平衡的树,能够保持数据有序.这种数据结构能够让查找数据.顺 ...

  5. Django View视图

    视图view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者 ...

  6. 开题报告中如何将一段文字插入到word表格中

    1,举例如下,打开空白word,设计一个20列的表格.任意一段文字. 2,选中这段文字,点击替换按钮.查找内容为“?”,替换为“^&,”(后面是逗号),并勾选“使用通配符”. 3,全部替换得到 ...

  7. curl配置host

    //要配置的虚拟域名$host = array( 'Host: demo-local.com' );$ch = curl_init();//要配置的ip 例如本机localhostcurl_setop ...

  8. Java数组(1)：数组与多维数组

    我们对数组的基本看法是,你可以创建它们,通过使用整型索引值访问它们的元素,并且他们的尺寸不能改变. 但是有时候我们需要评估,到底是使用数组还是更加灵活的工具.数组是一个简单的线性序列,这使得元素访问非 ...

  9. 【笔记】7天玩转容器&CKA管理员实训

    第一部分 day1,容器基础知识介绍 安装 apt-get install docker-engine [root@cce-7day-fudonghai-24106 01CNL]# docker -v ...

  10. Linux（CentOS）下安装tesseract-ocr以及配置依赖leptonica

    下载 wget https://github.com/tesseract-ocr/tesseract/archive/4.1.0.tar.gz wget http://www.leptonica.or ...