<!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. Elasticsearch6.5.1破解x-pack,设置密码并使用head插件登陆。

    #没有许可证的es无法持久的设置密码,而且使用一段时间后会过期,过期后,一些功能无法被使用,例如head插件无法看到es状态. 下图是过期的es的状态,可通过此url查看:http://ip:port ...

  2. H5和原生APP之间的区别

    最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的总结原因方发现很多人都说纯H5 APP一次编写就能支持android和IOS两 ...

  3. selenium webdriver常用函数

    from selenium import webdriver driver = webdriver.Ie(executable_path = "e:\\IEDriverServer" ...

  4. NLP 计算机视觉 cv 机器学习 ，入们基础

    吴恩达的deep Learning 吴恩达机器学习 李宏毅 的机器学习   http://speech.ee.ntu.edu.tw/~tlkagk/courses.html 斯坦福的概率图模型    ...

  5. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 -- iframe专题 <下>

    学习目的: 掌握iframe矿建的定位,因为前端的iframe框架页面元素信息,大多时候都会带有动态ID,无法重复定位. 场景: 1. iframe切换 查看iframe 切换iframe 多个ifr ...

  6. 输入一个数值num，对1到num的所有的数值进行全排列

    输入一个数值num,对1到num的所有的数值进行全排列: 其实这个题目可以看成是将1到num个数字放入num个有序的盒子里面:当将最后一个数字放入盒子里的时候,就输出所有盒子里的数字:这就是一个排列的 ...

  7. NumSharp的数组切片功能

    NumSharp的数组切片功能 原文地址:https://medium.com/scisharp/slicing-in-numsharp-e56c46826630 翻译初稿(英文水平有限,请多包涵): ...

  8. git pull因为主线分支问题解决

    方法1:如果你想保留刚才本地修改的代码,并把git服务器上的代码pull到本地(本地刚才修改的代码将会被暂时封存起来) git stashgit pull origin mastergit stash ...

  9. HDU 4417 【线段树+离线处理】

    http://acm.hdu.edu.cn/showproblem.php?pid=4417 题意:找出给定区间内,有多少个数小于等于给定的数.用线段树维护的话会超时,要用到线段树的离线操作,对询问与 ...

  10. （4.35）sql server清理过期文件【转】

    在SQL Server中, 一般是用维护计划实现删除过期文件.不过直接用脚本也是可以的,而且更灵活. 下面介绍三种方法, 新建一个作业, 在作业的步骤里加上相关的脚本就可以了. --1. xp_del ...