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. TP复习7

    //编写search方法,实现搜索 public function search(){ //获取post的数据,根据数据组装查询的条件,根据条件从数据库中获取数据,返回给页面中遍历 if(isset( ...

  2. document.createElement("A");

    搞了一天,终于把A里面的属性弄出来 代码1: <BODY></BODY><SCRIPT LANGUAGE="JavaScript"><!- ...

  3. [Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

    In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router ...

  4. C 语言指针怎么理解？

    对于程序员来说内存可以简化成这样一种东西:&lt;img src="https://pic1.zhimg.com/4d060c3f67c22cd4b07273db00f64708_b ...

  5. oralce 函数 FOR windows 跟踪神器

    https://github.com/dennis714 http://www.yurichev.com

  6. 第十二天--Property List和NSUserDefaults

    转自:http://appleparty.diandian.com/post/2012-05-24/9098104219 Property List  (属性表) 定义:Property List文件 ...

  7. socketpair理解

    转载:http://liulixiaoyao.blog.51cto.com/1361095/533469/ 今天跟人谈到socketpair的问题,晚上回来写了个程序验证下自己的猜测! 先说说我的理解 ...

  8. Masonry 布局 cell 高度适应的一种方案(实现类似朋友圈简单布局)

    来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89298/ 点击 → 申请加入伯乐在线专栏作者 前言: 我模仿的是微博的布局所以也就没有 评论动态刷新cell. 1 ...

  9. solr 范围查询

    []表示查询一个包括边界范围, {}表示查询一个不包括边界范围 A TO * 表示没有上界即>=A或是>A ,视使用的是[]还是{}而定 * TO A 表示没有下界即<=A或是< ...

  10. Android进阶笔记19：onInterceptTouchEvent、onTouchEvent与onTouch

    1.onTouch方法:onTouch方法是View的 OnTouchListener借口中定义的方法,处理View及其子类被touch是的事件处理.当一个View绑定了OnTouchLister后, ...