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. POJ 3126 Prime Path （BFS）

    [题目链接]click here~~ [题目大意]给你n,m各自是素数,求由n到m变化的步骤数,规定每一步仅仅能改变个十百千一位的数,且变化得到的每个数也为素数 [解题思路]和poj 3278类似.b ...

  2. Quartz.Net实现定时任务调度

    Quartz.Net介绍: Quartz一个开源的作业调度框架,OpenSymphony的开源项目.Quartz.Net 是Quartz的C#移植版本. 它一些很好的特性: 1:支持集群,作业分组,作 ...

  3. android genymation eclipse安装

    http://www.cnblogs.com/1114250779boke/p/3657996.html

  4. redis源码学习

    上帝禁区  http://blog.csdn.net/a600423444/article/details/8944601

  5. 1.6.9 UIMA Integration

    1. UIMA 集成 你可以使用solr集成Apache的非结构化信息管理架构(UIMA).UIMA可以让你定义自己的分析引擎通道,逐步添加元数据到文档的标注. 关于Solr UIMA的更多信息,参考 ...

  6. 结合源码看nginx-1.4.0之nginx异步机制详解

    目录 0. 摘要 1. nginx异步设计思想 2. nginx异步设计数据结构 3. nginx异步机制源码解析 4. 一个简单的应用异步例子 5. 小结 6. 参考源码

  7. [转]SVN:This client is too old to work with working copy 的解决方案

    前一段时间,我在Eclipse碰到一个SVN错误,出现的原因是我的Eclipse的SVN插件是1.6,服务器的SVN版本是1.5.4,然后我在工程目录下做了一次提交操作(不是Eclipse里),到最后 ...

  8. 【Mood 16 】史上最全github使用方法：github入门到精通

    [初识Github] 首先让我们大家一起喊一句“Hello Github”.YEAH!就是这样. Git 是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管 ...

  9. Oracle基础 物理备份 冷备份和热备份（转）

    一.冷备份介绍:    冷备份数据库是将数据库关闭之后备份所有的关键性文件包括数据文件.控制文件.联机REDO LOG文件,将其拷贝到另外的位置.此外冷备份也可以包含对参数文件和口令文件的备份,但是这 ...

  10. pl sql 变量的声明和赋值

    链接地址:http://www.cnblogs.com/zhengcheng/p/4168670.html 一.什么是PL-SQL PL-SQL是结合了Oracle过程语言和结构化查询语言(SQL)的 ...