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. PHP 自动生成导航网址的最佳方法 v20130826

    经常制作开发不同的网站的后台,写过很多种不同的后台导航写法. 最终积累了这种最写法,算是最好的吧.附上截图和代码如下(PHP+HTML) <?php $linkArr = array( 'ind ...

  2. c#高效的线程安全队列ConcurrentQueue<T>(上)

      ConcurrentQueue<T>队列是一个高效的线程安全的队列,是.Net Framework 4.0,System.Collections.Concurrent命名空间下的一个数 ...

  3. 一款基于jQuery多图切换焦点图插件

    这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

  4. ApplePay高调入华，教你在app里上线ApplePay

      ApplePay在中国上线后,就有许多线上app前后脚加入了对其的接入支持,个人比较喜欢的ENJOY也抢在首批接入了ApplePay应用内支付.本文将分享作者的接入经验. ApplePay是苹果公 ...

  5. 使用NuGet加载包，发现加载的dll都是最新版，原来少加了参数[-Version]

    使用NuGet获取AutoMapper 发现无法正确加载包,项目版本是3.5,获取的dll版本较高,查资料发现可以通过 “-Version” 指定加载包版本 http://www.mamicode.c ...

  6. Java Collection集合接口

    Collection接口是赖以集合框架建立的基础.它声明的所有集合的核心方法.这些方法概括于下表中. 因为所有集合都要实现Collection,熟悉它的方法是对框架有清晰的认识很有必要.这几种方法都可 ...

  7. 【阿里云产品公测】离线归档OAS，再也不用担心备份空间了

    [阿里云产品公测]离线归档OAS,再也不用担心备份空间了 作者:阿里云用户莫须有3i 1 起步  1.1 初识OAS  啥是OAS,请看官方说明: 引用: 开放归档服务(Open Archive Se ...

  8. .Net MVC 4 Web Api 输出Json 格式

    1.Global 中增加json输出 GlobalConfiguration.Configuration.Formatters.JsonFormatter.MediaTypeMappings.Add( ...

  9. 【Mood-8】IT男！五更天！

    男人从毕业到30岁之间所承受的叠加的压力,赡养父母.结婚生子.升职加薪.工作压力.生活质量,这些东西可以压得我们喘不过起来,也成为我们成长的动力, 我们累,但不说累,我们闷着头做事儿,不张扬,但每个都 ...

  10. 一个Java线程死锁的例子

    package com.lk.B; public class Test4 { private static final Object o1 = new Object(); private static ...