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. HTML之一字符集

    ASCII字符集 ISO字符集 GBK等等. 1>首先,说一说为什么要设置html文件的字符集 如果不指定的话,浏览器会使用本地操作系统的字符集,那么,如果你的应用需要支持多国语言的话,就会有问 ...

  2. Javascript模块化编程系列三: CommonJS & AMD 模块化规范描述

    CommonJS Module 规范 CommonJS 的模块化规范描述在Modules/1.1.1 中 目前实现此规格的包有: Yabble,CouchDB,Narwhal (0.2), Wakan ...

  3. 【JavaScript】JavaScript中的Timer是怎么工作的（ setTimeout，setInterval）

    原文(http://www.yeeyan.org/articles/view/luosheng/24380) 作为入门者来说,了解JavaScript中timer的工作方式是很重要的.通常它们的表现行 ...

  4. The sound of silence引发的关于互联网以及教育的利弊思考

    “茫茫人海里,人群跟著人群,我们无时无刻不感到孤寂.停下来让我们好好沟通吧,否则人类的关系将日形恶化,沦为新世纪科技的牺牲品” ------- Simon 说实话,我第一次看<毕业生>应该 ...

  5. 位图字体生成工具Bitmap Font Generator的使用

    首先,说下为什么要使用这款工具作为cocos2d-x的字体生成工具.其实cocos2d-x能使用的字体生成工具也有好几个,当然了本人也没有全部使用过,就不一一说明了.Bitmap Font Gener ...

  6. redis实现与分析

    http://www.kuqin.com/shuoit/20141019/342739.html

  7. HTTP Referer二三事---转

    授权方式:署名,非商业用途,保持一致,转载时请务必以超链接(http://www.fwolf.com/blog/post/320)的形式标明文章原始出处和作者信息及本声明. 什么是HTTP Refer ...

  8. Cloudera Error: "Failed to handle Heartbeat Response"

    在使用cloudera manager安装CDH过程中,发现安装进程卡在给某个slave机分配parcel上. 查agent的log发现如下错: ...MainThread agent ERROR F ...

  9. 控制反转（IoC）

          大量使用工厂模式引起的问题:       Client 对象需要使用 Service1 的 execute( ) 方法完成特定功能,而 Service1 的实现 Service1Impe类 ...

  10. 【阿里云产品评测】小站长眼中的巅峰云PK

    [阿里云产品评测]小站长眼中的巅峰云PK 阿里云论坛用户:昵称-a5lianmeng 笔者是一名小站长,因狂热互联网,而在毕业后由宅男逐渐进入站长队伍,在毕业后的几年间,经营6个流量类网站,身为站长, ...