<!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. storm java.io.NotSerializableException

    今天编写一个storm的topology,bolt的逻辑跟之前的类似. 为了减少重复代码,我建了个抽象基类,存放bolt的公共逻辑,设计了几个abstract方法,不同的逻辑部分由子类实现. 基类日志 ...

  2. Django admin site应用

    django自带的admin后台管理,可以实现对数据库表的增删改查,用起来十分方便.其使用和配置主要分为三个步骤: 1,创建超级用户 需要创建超级用户来登陆admin后台系统,在命令行中输入 pyth ...

  3. 前端知识点回顾之重点篇——jQuery实现的原理

    jQuery jQuery的实现原理 参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659 外层沙箱和命名空间$ 为了避免声明了 ...

  4. Linux shell利用sed如何批量更改文件名详解[转载]

     需求背景: 目录A用来存放自动化的包生成的apk文件,现在开发修改了包名的 命名规则:环境名称(pro|uat)-release-日期-v版本号.apk 原来的是思路是通过正则表达式匹配新的包名,但 ...

  5. FreeMarker学习2

    为了处理缺失变量,FreeMarker提供了两个运算符: 用于防止对象不存在而导致的异常 !:指定缺失变量的默认值 ??:判断某个变量是否存在,返回boolean值 ${item.createtime ...

  6. Ubuntu防火墙常用命令

    Ubuntu默认防火墙安装.启用.配置.端口.查看状态相关信息 最简单的一个操作: sudo ufw status(如果你是root,则去掉sudo,ufw status)可检查防火墙的状态,我的返回 ...

  7. TMainMenu 类[三] - 手动建立菜单(5) : 给菜单项添加事件

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  8. 4. Linux管理命令

    df.du:磁盘.空间相关的命令 df -h 以直观的方式显示磁盘分区使用状况 df test 查询test属于哪个分区   du du -h 以直观方式显示文件夹目录的使用状况 du -s 只显示当 ...

  9. 转：OPC协议解析-OPC UA OPC统一架构

    1    什么是OPC UA 为了应对标准化和跨平台的趋势,为了更好的推广OPC,OPC基金会近些年在之前OPC成功应用的基础上推出了一个新的OPC标准-OPC UA.OPC UA接口协议包含了之前的 ...

  10. uni-app相关

    uni-app 中以下组件的高度是固定的,不可修改: 导航栏高度固定为 44pxtabBar 高度固定为 56px 状态栏比较特殊,是一个变量 .status_bar{ height: var(--s ...