<!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. 笔记：YSmart: Yet Another SQL-to-MapReduce Translator

    http://web.cse.ohio-state.edu/hpcs/WWW/HTML/publications/papers/TR-11-7.pdf  Introduce样例sql语句:" ...

  2. Golang 空指针nil的方法和数据成员

    golang中,有一个特殊的指针值nil. 如何使用nil没有方法和成员变量呢? 下面来看下具体例子. 程序中,定义结构体类型Plane, 将Plane类型的指针作为函数的参数,然后传入nil作为实参 ...

  3. leetcode 146. LRU Cache 、460. LFU Cache

    LRU算法是首先淘汰最长时间未被使用的页面,而LFU是先淘汰一定时间内被访问次数最少的页面,如果存在使用频度相同的多个项目,则移除最近最少使用(Least Recently Used)的项目. LFU ...

  4. Docker监控：最佳实践以及cAdvisor和Prometheus监控工具的对比

    在DockerCon EU 2015上,Brian Christner阐述了“Docker监控”的概况,分享了这方面的最佳实践和Docker stats API的指南,并对比了三个流行的监控方案:cA ...

  5. Mybatis 联合查询XML与注解对比

    由于是练习,故只做了感兴趣的一部分测试. 测试类容XML配置转注解方式 实体类为了测试请忽略设计是否合理… User.java @Alias("User")public class ...

  6. delphi 中Adoquery ，在打开时能否让记录指针不移动？ [问题点数：40分，结帖人microd]

    delphi 中Adoquery ,在打开时能否让记录指针不移动?由于数据集Adoquery 时,它的针指称动会废时,能否在打开完成之前不让记录指针不移动.打开完毕之后再回复移动? 这样用:self. ...

  7. Linux CentOS汉化系统

    u root切换为root用户 写入环境变量 echo "export LANG="zh_CN.UTF8"">>/etc/profile sourc ...

  8. .Net Core 2.*+ InfluxDB+Grafana+App Metrics实时性能监控

    前言 .net core 2.* 实施性能监控 这个工具其实给运维 大大们用起来是更爽的.但是Grafana现在还没有找到中文版. 本文需要了解的相关技术与内容: InfluxDb(分布式时序数据库, ...

  9. JS GZIP压缩

    GZIP压缩,GZIP解压需要用到 pako.js 文件:下载地址:https://download.csdn.net/download/qq_35713752/10627338 使用方法: JS压缩 ...

  10. Claymore's Dua Miner挖矿教程

    一.软件准备:首先需要一款挖矿软件.在这里推荐Claymore's Dua Miner的官方原版. 注意: 1. 如果不了解,请不要在网上随意下载其它版本的挖矿软件或者Claymore's Dua M ...