1. 写表格时最好自己写上<tbody>，因为在JS里面要用，要不然html里没有，但是我们在JS里面用得飞起，也说不过去啊。
  2. 获取表格元素时，tBodis[0]一定要加上，本人试过不加，然后就没有然后了。记住这几个表格的快捷标签tBodis，rows，cells。
  3. 隔行变色：用的是这个小Tip哦--if（i%2)能否被2整除，相当方便。
  4. 用一个变量来储存某个元素原来的属性，让该元素经过一系列变化后还能回到原来的属性。这里用了oldColor来储存原来的颜色，在鼠标移出之后，加上它，就会让这行本来是灰色的表格再变回灰色。 
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
         <script type="text/javascript">
    
             window.onload=function(){
    
                 var oTab=document.getElementById('tab1')
    
                 var oldColor=''
    
                 for(i=0;i<oTab.tBodies[0].rows.length;i++){
    
                                     oTab.tBodies[0].rows[i].onmouseover=function(){
    
                                         oldColor=this.style.background
    
                     this.style.background='orange';}
    
                                     oTab.tBodies[0].rows[i].onmouseout=function(){
    
                     this.style.background=oldColor;
    
                 }
    
                     if(i%2){
    
                         oTab.tBodies[0].rows[i].style.background=''
    
                     }
    
                     else{
    
                         oTab.tBodies[0].rows[i].style.background='gray'
    
                     }
    
                 }
    
             }
    
         </script>
    
     </head>
    
     <body>
    
         <table id="tab1" border="1" width="400" cellpadding="15" >
    
             <caption>DOM高级操作试用表</caption>
    
             <thead>
    
                 <td>序号</td>
    
                 <td>名字</td>
    
                 <td>年龄</td>
    
             </thead>
    
             <tbody>
    
             <tr>
    
                 <td>1</td>
    
                 <td>赵毅</td>
    
                 <td>18</td>
    
             </tr>
    
             <tr>
    
                 <td>2</td>
    
                 <td>钱军</td>
    
                 <td>20</td>
    
             </tr>
    
             <tr>
    
                 <td>3</td>
    
                 <td>孙火</td>
    
                 <td>22</td>
    
             </tr>
    
             <tr>
    
                 <td>4</td>
    
                 <td>李四</td>
    
                 <td>24</td>
    
             </tr>
    
             </tbody>
    
         </table>
    
     </body>
    
 </html>

JS学习第三课的更多相关文章

  1. Elasticsearch7.X 入门学习第三课笔记----search api学习（URI Search）

    原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...

  2. Git速成学习第三课：创建与合并分支

    本来第三课想记录一下远程仓库的创建与克隆0.0但是想了想还是不写了. 这里写一下分支管理中的创建与合并. Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng. ...

  3. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  4. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  5. D3.js学习（三）

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  6. Ext JS学习第三天 我们所熟悉的javascript（二）

    •javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类 ...

  7. Node.js学习笔记(三) --- package.json 及cnpm

    一.包 Nodejs   中除了它自己提供的核心模块外,我们可以自定义模块,也可以使用第三方的模块.Nodejs 中第三方模块由包组成,可以通过包来对一组具有相互依赖关系的模块进行统一管理. 完全符合 ...

  8. Python编程学习第三课之编程从Hello World开始

    在搞定了前几节课的情况下,大家是否有一种想要跃跃欲试的赶脚,接下来就是我们开始练手的实战时刻. 每个编程人员入门编程的第一课都是向我们马上要进入的编程世界问好,"你好,世界"英文说 ...

  9. JS学习笔记 (三) 对象进阶

    1.JS对象 1.1 JS对象特征 1.JS对象是基本数据数据类型之一,是一种复合值,可以看成若干属性的集合. 属性是名值对的形式(key:value) 属性名是字符串,因此可以把对象看成是字符串到值 ...

随机推荐

  1. iOS开发——实用技术OC篇&单例模式的实实现（ACR&MRC）

    单例模式的实实现(ACR&MRC) 在iOS开发中单例模式是一种非常常见的模式,虽然我们自己实现的比较少,但是,系统却提供了不少的到来模式给我们用,比如最常见的UIApplication,No ...

  2. MySQL · 特性分析 · 内部临时表

    http://mysql.taobao.org/monthly/2016/06/07/#rd MySQL中的两种临时表 外部临时表 通过CREATE TEMPORARY TABLE 创建的临时表,这种 ...

  3. XCODE多行代码缩进快捷键

    转自:http://xiagudao.com/xcode多行代码缩进快捷键 在XCODE中无法使用TAB键对多行代码进行缩进.想多行缩进,选中需要缩进的代码使用快捷键command(花键)+] 即可右 ...

  4. 基于jQuery实现苹果Dock样式的菜单

    爱编程小编之前我们分享过相当数量的jQuery菜单了,今天要给大家带来一款Dock样式的jQuery菜单,用过苹果的朋友都知道,它的Dock菜单非常酷,配合漂亮的图标就更加绚丽了.效果图如下: 在线预 ...

  5. 项目源码--Android天气日历精致UI源码

    下载源码 技术要点: 1. 天气日历精致UI 2. Android的Http通信技术 3. Android的天气信息解析 4. Android的日历信息的统计 5. Andorid的地理位置的管理 6 ...

  6. LeetCode39 Combination Sum

    题目: Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C  ...

  7. IOS 开发中判断NSString是否为空字符

    //当 请求网络 或者获取其他返回数据 首先 要做一次判断 数据是否为空 防止程序崩溃 程序崩溃 好比拿刀扎在程序员的心啊- if(为空) { 做提示对话框等操作 } else { 正常执行 } - ...

  8. iis8 默认不支持svc解决方法

    最近在IIS8中发布WCF服务应用时,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少对WCF服务的Managed Handler,按照以下步骤添加后,IIS8即支持WCF服务. 1. 首 ...

  9. Android下拉刷新-SwipeRefreshLayout,RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout)

    SwipeRefrshLayout是Google官方更新的一个Widget,可以实现下拉刷新的效果.该控件集成自ViewGroup在support-v4兼容包下,不过我们需要升级supportlibr ...

  10. p39

    ; ========================================== ; pmtest2.asm ; 编译方法:nasm pmtest2.asm -o pmtest2.com ; ...