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

这里用到一个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下开启oracle服务和开启监听

    su - oracle  切换到oracle用户模式下 sqlplus /nolog  //登录sqlplus SQL> connect /as sysdba  //连接oracle SQL&g ...

  2. CVE-2018-7566

    概念解读 什么是竞争条件? 由于两个或者多个进程竞争使用不能被同时访问的资源,使得这些进程有可能因为时间上推进的先后原因而出现问题,这叫做竞争条件(Race Condition). 什么是互斥锁? 在 ...

  3. PaddlePaddle Perceptron Example

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  4. 第四十一课 KMP子串查找算法

    问题: 右移的位数和目标串没有多大的关系,和子串有关系. 已匹配的字符数现在已经有了,部分匹配值还没有. 前六位匹配成功就去查找PMT中的第六位. 现在的任务就是求得部分匹配表. 问题:怎么得到部分匹 ...

  5. python3.6升级

    Ubuntu 14.04 and 16.04 If you are using Ubuntu 14.04 or 16.04, you can use Felix Krull's deadsnakes ...

  6. ORA-15025 搭建DG环境，restore controlfile报错，提示oracle无法使用ASM存储

    环境说明: #主库RAC环境 #备库RAC环境,操作系统AIX 6.1 数据库版本11.2.0.3 报错说明: #主库备份控制文件,传输至备库,备库restore 报错 本篇文档,分为两大阶段:第一阶 ...

  7. 【leetcode】26-RemoveDuplicatesfromSortedArray

    problem RemoveDuplicatesfromSortedArray 注意数组为空的情况要首先考虑,并给出返回值: 注意也要同时给出新的数组的数值: 注意数组最后两个元素的处理: class ...

  8. Django中HtttpRequest请求

    1.什么是HttpRequest HttpRequest,就是对请求对象的封装,里面封装的是请求过程中的所有信息.在Django中HttpRequest被封装成request对象并封装到视图处理函数中 ...

  9. [LeetCode&Python] Problem 21. Merge Two Sorted Lists

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  10. FTP相关、用vsftpd搭建ftp、xshell使用xftp传输文件、使用pure-ftpd搭建ftp服务

    1.FTP相关(file transfer protocol,文件传输协议)   2.用vsftpd搭建ftp安装:yum install vsftpd -y创建一个虚拟用户:useradd  vft ...