我们在遇到表格行数太多时，往往会眼花缭乱，下一行看成对应上一行。就要遇到写鼠标移动那行，那行高亮显示。

这里用到一个this关键字：

　　在面向对象里，this代表对象本身。

　　在这里只要记住，谁调用这个函数，this就指向谁。

DOM 0:

<table id="tr1" border="1" style="width: 300px;">

    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>1</td><td>1</td></tr>

    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>2</td><td>2</td><td>2</td></tr>

    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>3</td><td>3</td><td>3</td></tr>

</table>

<script>

    function t1(n) {

        var myTrs = document.getElementsByTagName('tr');

        myTrs[n].style.backgroundColor = "red";

    }

    function t2(n) {

        var myTrs = document.getElementsByTagName('tr');

        myTrs[n].style.backgroundColor = "";

    }

</script>

以上明显缺点，是如果行数太多了，每一行都要加事件，而且没有做到代码js cs 独立。

DOM 1：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <table id="tr1" border="1" style="width: 300px;">

     <tr><td>1</td><td>1</td><td>1</td></tr>

     <tr><td>2</td><td>2</td><td>2</td></tr>

     <tr><td>3</td><td>3</td><td>3</td></tr>

 </table>

 <table id="tr2" border="1" style="width: 300px;">

     <tr><td>1</td><td>1</td><td>1</td></tr>

     <tr><td>2</td><td>2</td><td>2</td></tr>

     <tr><td>3</td><td>3</td><td>3</td></tr>

 </table>

 <script>

     var myTrs = document.getElementById('tr1').children[0].children;

     for(var i=0;i<myTrs.length;i++){

         myTrs[i].onmouseover = function () {

             this.style.backgroundColor = 'red';  //这里的this指代的是调用这个函数的对象myTrs[i].但不能直接写成myTrs[i]，因为在事件没响应时，函数全定义好了，所以执行时，i永远等于2.

         };

         myTrs[i].onmouseout = function () {

             this.style.backgroundColor = "";

         }

     }

 </script>

 </body>

 </html>

前端大神讲解，初级程序与高级程序写表格变色的区别，dom 0 与dom 1的更多相关文章

  1. 为何你跟着滴滴D8级前端大神撸代码，技术却依旧原地踏步？

    引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...

  2. 耐克的定制页用canvas如何实现....跪求前端大神指点。

    选择鞋子的鞋底 鞋底会变色,也可以添加自己定制的id,这个东西看的是用canvas做的,但是小弟确实不知道怎么去做,求大神指点一二,不胜感激! nike的定制页地址:http://store.nike ...

  3. 为什么大神的UI设计那么高级？答案尽在此文…

    对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...

  4. web开发菜鸟应该如何向前端大神提问题（一次性把问题描述清楚）

    1. 问题的环境和背景这里的背景一般包括,是针对桌面浏览器还是移动端开发?如果是桌面浏览器,则兼容性要求如何?比方说,你来咨询父级是百分比高度的垂直居中效果,你就要说明,你这个效果是需要兼容IE7+还 ...

  5. 要想成为前端大神，那些你不得不知晓的web前端命名规范。

    一.Web语义化 1.1 H5的语义化 对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范.尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上.比如html ...

  6. WEB前端大神之路之基础篇

    CSS篇: 1.CSS权重: 不重复造轮子啦,直接传送门(CSS选择器的权重与优先规则) JavaScript篇: 1.this关键字: 它是一种引用(referent).指向的是当前上下文(cont ...

  7. 听justjavac大神live前端的入门与进阶小笔记

    代码规范 代码强壮,调试代码 少用变量,多用常量 少用for循环,why循环,多用函数式, 不要直接去使用框架 刷题 提高编程思维 用js去做c语音的问题 阅读别人代码,去看别人的代码 a+b> ...

  8. 酷派大神F2系列使用QPST进行nv备份和恢复，解决无信号问题(附备份文件)

    测试机器: 大神F2联通版 8675_W00 系统COOLUI55     写贴原因: 自己无意间刷错了包,结果手机无信号,进入工程模式怎么设置都没有用.尝试过系统还原(备份过).刷新的ROM.线刷, ...

  9. wire与reg的区别？转载大神！

    本文转自:http://www.cnblogs.com/thymon/archive/2010/06/09/1754541.html //------------------------------- ...

随机推荐

  1. 【linux基础】如何查看Linux系统是64位还是32位

    如何查看Linux系统是64位还是32位 $getconf LONG_BIT or $file /bin/ls or #查看linux版本 $lsb_release -a or $uname -a 参 ...

  2. 阿里druid数据库连接池配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. BFS深度优先搜索 炸弹人

    题面:一个人在一个坐标放炸弹,请问可以可以杀死的敌人数目最大是,并且输出该点的坐标 G代表敌人 .代表该位置可以走 "#"代表该位置存在障碍物 并且防止炸弹的蔓13 13 3 3 ...

  4. （24）ajax上传json格式的数据

    urs.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpat ...

  5. （8）Python连接操作MySQL

    pymysql模块下的方法 '''必须实例化对象才能建立连接''' 1.pymysql.connect  #和MySQL建立连接 '''得由对象去调用定义游标''' 2.xxx.sursor()  # ...

  6. Thinkphp的知识内容

    详细的介绍内容:https://baike.so.com/doc/5504725-5740469.html

  7. js中将一个字一个字的打印出来

    第一种方式: setTimeout(function(){ var cc=document.createTextNode(ss[i]) content.appendChild(cc) },3000)

  8. python------模块定义、导入、优化 ------->Yaml, l模块

    一. yaml模块 用来做配置文件. 需要pip安装该包. 二. ConfigParser模块 用来生成和修改常见配置文件,在python3.x版本中更名为configparser. (什么是配置文件 ...

  9. Java基础三（Scanner键盘输入、Random随机数、流程控制语句）

    1.引用类型变量的创建及使用2.流程控制语句之选择语句3.流程控制语句之循环语句4.循环高级 ###01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scanner类是属于 ...

  10. redis使用问题总结

    1.redis使用过多内存导致其他进程无法正常运行情况:      解决方案:限制redis的最大使用内存,修改redis.conf中的maxmemory(一般不要超过空闲内存的3/5,如果不设置ma ...