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

这里用到一个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. CountDownLatch & CyclicBarrier

    CountDownLatch 在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待.用给它的代数初始化CountDownLatch,且计数器无法被重置.当前计数到达0之前,await方 ...

  2. shell统计当前文件夹下的文件个数、目录个数

    1. 统计当前文件夹下文件的个数 ls -l |grep "^-"|wc -l 2. 统计当前文件夹下目录的个数 ls -l |grep "^d"|wc -l ...

  3. JavaScript中的内置对象-8--3.Math-Math对象的方法-min（）- max（）- ceil（） - floor（）- round（）- abs（）; Math对象的random()方法;

    JavaScript内置对象-3.Math(数值) 学习目标 1.掌握Math对象的方法: min() max() ceil() floor() round() abs() Math.min() 语法 ...

  4. php腾讯面试题（转）

    一.PHP开发部分 1．合并两个数组有几种方式,试比较它们的异同 答:1.array_merge() 2.’+’ 3.array_merge_recursive array_merge 简单的合并数组 ...

  5. LINUX添加磁盘

    博客网站原因,图片不能很好插入,望谅解 第一步:设置加载硬盘.由于是虚拟硬盘大小,不会一开始直接占用全部空间,使用多少占用多少,为了避免后期磁盘满前期设计大容量 第二步加载查看磁盘: 再执行fdisk ...

  6. 使用Git去管理修改

    Git跟踪的是修改而不是文件本身. 看下面一个例子 首先我们修改我们Git管理的git.txt文件 如下: 然后添加: 然后我们再去修改git.txt这个文件 然后直接提交到分支里如图: 也就是说我们 ...

  7. php-isset和empty

    <?php $a = null; if(isset($a)){ echo "is set"."\n"; } else{ echo "not se ...

  8. IDLE的使用

    为什么要用IDE? 到现在为止,我们也是写过代码的人啦,但你有没有发现,每次写代码要新建文件.写完保存时还要选择存放地点,执行时还要切换到命令行调用python解释器,好麻烦呀,能否一气呵成,让我简单 ...

  9. 《DSP using MATLAB》Problem 6.14

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  10. 《DSP using MATLAB》Problem 6.9

    9月9日,我们怀念毛主席! 代码: %% +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...