1. 写表格时最好自己写上<tbody>，因为在JS里面要用，要不然html里没有，但是我们在JS里面用得飞起，也说不过去啊。
  2. 获取表格元素时，tBodis[0]一定要加上，本人试过不加，然后就没有然后了。记住这几个表格的快捷标签tBodis，rows，cells。
  3. 隔行变色：用的是这个小Tip哦--if（i%2)能否被2整除，相当方便。
  4. 用一个变量来储存某个元素原来的属性，让该元素经过一系列变化后还能回到原来的属性。这里用了oldColor来储存原来的颜色，在鼠标移出之后，加上它，就会让这行本来是灰色的表格再变回灰色。 
    1.  <!DOCTYPE html>
    2.  <html>
    3.      <head>
    4.          <meta charset="UTF-8">
    5.          <title></title>
    6.          <script type="text/javascript">
    7.              window.onload=function(){
    8.                  var oTab=document.getElementById('tab1')
    9.                  var oldColor=''
    10.                  for(i=0;i<oTab.tBodies[0].rows.length;i++){
    11.                                      oTab.tBodies[0].rows[i].onmouseover=function(){
    12.                                          oldColor=this.style.background
    13.                      this.style.background='orange';}
    14.                                      oTab.tBodies[0].rows[i].onmouseout=function(){
    15.                      this.style.background=oldColor;
    16.                  }
    17.                      if(i%2){
    18.                          oTab.tBodies[0].rows[i].style.background=''
    19.                      }
    20.                      else{
    21.                          oTab.tBodies[0].rows[i].style.background='gray'
    22.                      }
    23.                  }
    24.              }
    25.          </script>
    26.      </head>
    27.      <body>
    28.          <table id="tab1" border="1" width="400" cellpadding="15" >
    29.              <caption>DOM高级操作试用表</caption>
    30.              <thead>
    31.                  <td>序号</td>
    32.                  <td>名字</td>
    33.                  <td>年龄</td>
    34.              </thead>
    35.              <tbody>
    36.              <tr>
    37.                  <td>1</td>
    38.                  <td>赵毅</td>
    39.                  <td>18</td>
    40.              </tr>
    41.              <tr>
    42.                  <td>2</td>
    43.                  <td>钱军</td>
    44.                  <td>20</td>
    45.              </tr>
    46.              <tr>
    47.                  <td>3</td>
    48.                  <td>孙火</td>
    49.                  <td>22</td>
    50.              </tr>
    51.              <tr>
    52.                  <td>4</td>
    53.                  <td>李四</td>
    54.                  <td>24</td>
    55.              </tr>
    56.              </tbody>
    57.          </table>
    58.      </body>
    59.  </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. How to Copy and Paste in the Ubuntu Gnome Terminal

    How to Copy: Select the content in terminal use your mouse , and then use Ctrl + Shift + C to copy t ...

  2. sqlserver2008 复制，镜像，日志传输及故障转移集群区别

    一, 数据库复制 SQL Server 2008数据库复制是通过发布/订阅的机制进行多台服务器之间的数据同步,我们把它用于数据库的同步备份.这里的同步备份指的是备份服务器与主服务器进行 实时数据同步, ...

  3. android Unable to instantiate application

    最近一段时间在做项目时候遇到一个错误老是解决不了,log如下: FATAL EXCEPTION: main12-11 09:08:53.922 E/AndroidRuntime( 1227): jav ...

  4. MySQL执行SHOW STATUS查询服务器状态状态之Handler_read_* 详解

    在MySQL里,我们一般使用SHOW STATUS查询服务器状态,语法一般来说如下: SHOW [GLOBAL | SESSION] STATUS [LIKE ‘pattern’ | WHERE ex ...

  5. IOS UIView子类UIScrollView

    转自:http://www.cnblogs.com/nightwolf/p/3222597.html 虽然apple在IOS框架中提供了很多可以直接使用的UI控件,但是在实际开发当中我们通常都是要自己 ...

  6. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 6.全局防护Bypass之一些函数的错误使用

    0x01 背景 PHP程序员在开发过程中难免会使用一些字符替换函数(str_replace).反转义函数(stripslashes),但这些函数使用位置不当就会绕过全局的防护造成SQL注入漏洞. 0x ...

  7. keytool 错误 java.io.IOException: incorrect AVA format

    给一个APK做签名,选择新建一个key并填写相关信息,但在Finish时,keytool报出了一个错误:keytool error: java.io.IOException: Incorrect AV ...

  8. 使用post方式提交数据

    post提交代码 public class MainActivity extends Activity { @Override protected void onCreate(Bundle saved ...

  9. TCP/IP协议原理与应用笔记22：静态和动态路由选择

    1. 静态路由选择: Static routing 管理员手工设置 管理员手动更新 不能保证路由的一致性和及时性 管理性强 没有路由开销 小型.变化缓慢网络 2. 动态路由选择 Dynamic rou ...

  10. Mac和Linux下测试端口是否存活一法[转载]

    测试端口存活的最常用的方法是telnet $telnet 127.0.0.1 80 不过这个方法有一个不方便的地方:连接成功后会进入交互模式,需要按 ctrl + ] 和 q 才能退出. 后来,经过网 ...